[email protected]

Center Everything In A Div

8

<style>

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

 

nav {

background-color: #000;

color: #fff;

height: 100px;

position: relative;

}

 

nav > div > ul {

align-items: center;

height: 100px;

position: absolute;

right: 100px;

top: 0;

display: grid;

grid-template-columns: 100px 100px 100px 100px;

grid-gap: 20px;

list-style-type: none;

}

 

nav > div > ul > a > li {

color: #fff;

text-decoration: none;

text-align: center;

}

 

nav > .logo {

position: absolute;

top: 50%;

left: -50px;

width: 230px;

color: #fff;

transform: translateY(-50%);

}

 

nav > .logo > span {

position: absolute;

right: 0;

top: 50%;

transform: translateY(-50%);

}

 

nav > div > ul > a {

width: calc(auto + 20px);

border: 1px solid grey;

padding: 10px;

border-radius: 20px;

text-decoration: none;

}

 

nav > div > ul > a:hover {

width: calc(auto + 20px);

border: 1px solid #007bff;

padding: 10px;

border-radius: 20px;

text-decoration: none;

}

 

nav > div {

display: inline-block;

}

</style>

<nav>

<div class="logo"><img src="https://freekode.centeltech.com/media/profile_pics/imgo_JNnnH5k.png" alt=""><span>FreeKode</span></div>

<div>

<ul>

<a href="#"><li>Home</li></a>

<a href="#"><li>About</li></a>

<a href="#"><li>About</li></a>

<a href="#"><li>Contact</li></a>

</ul>

</div>

</nav>