CSS: Center Element Vertically with Flex and Grid

Question

I tried many types of styles and never worked. Margin-top: 10px moves it but not exactly center. I'm using flex within the grid. I tried changing the height and width in certain classes and still didn't work.

**HTML**


<body>

<!-- Navbar Section -->

<nav class="navbar">
<ul class="nav-grid">
<li class="navbar__item">
<a href="#home" class="navbar__links" id="home-page"><p>home</p></a>
</li>
<li class="navbar__item">
<a href="#about" class="navbar__links" id="about-page"><p>about</p></a>
</li>
<li class="navbar__item">
<a href="#services" class="navbar__links" id="services-page"><p>services</p></a>
</li>
</li>
</ul>
</div>
 </nav> 


</body>

**CSS**

:root {
--background-color: black;
--body-color: #fff;
}
body {
margin: 0;
font-family: arial;
color:  var(--body-color);
background: var(--background-color);
}


.navbar {
position: sticky; 
}


/*Mobile Nav*/

@media screen and (max-width: 700px) {

.navbar__menu {
display: grid;
grid-template-columns: auto;  
}

.navbar__item {
height: 80px;
}

.navbar__links {
display: flex;
background: grey;
height: 20px;
width: 80px;
}

I tried align-items: center, align-self: center, and margin: auto does not work. It's a mix of grid and flex.

CSS: Center Element Vertically with Flex and Grid

0 Answers0