header {
background-color: #18162C;
}
.nav-box {
background-color: rgb(36, 32, 80);
width: 60%;
margin: auto;
height: 90px;
}
.image {
width: 54px;
}
.nav-box ul li a {
font-size: 20px;
color: #ffffff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
.nav-box ul {
text-align: center;
}
/* Aqui el Codigo de Css GRID */
.box-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-gap: 20px;
}
<body>
<header>
<nav class="nav-box">
<ul class="box-grid">
<li><a href="#"><img class="image" src="./logo.png" alt=""></a></li>
<li><a href="#">lorem</a></li>
<li><a href="#">lorem</a></li>
<li><a href="#">lorem</a></li>
</ul>
</nav>
</header>
</body>
Quisiera saber como centrar los elementos de forma vertical dentro de una GRID con Css mas que todo una imagen aquí les dejo el código y una imagen de como se ve.
Vi varios vídeos pero en general no aplican cuando están dentro de una GRID o en Responsive no se adaptan bien y quisiera saber como hacer de la mejor forma posible.