1

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. introducir la descripción de la imagen aquí

2
  • Si a los items del menu las imagenes y ese texto, mas se me complica esa imagen el 20 abr. 2020 a las 17:46
  • Quería que estén centrados en el contenedor de forma vertical y horizontalmente. el 20 abr. 2020 a las 17:50

2 respuestas 2

1

Se puede hacer con las propiedades align-content y align-items, pero además necesitas darle al grid la altura del contenedor:

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;
    align-content: center;
    align-items: center;
    height: 100%;
}
<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>

1
  • Excelente muchas gracias, se alineo todo correctamente y adaptable al Responsive el 20 abr. 2020 a las 17:49
0

lo que puedes hacer es aplicarle a la clase CSS .nav-box lo siguiente:

.nav-box {
    background-color: rgb(36, 32, 80);
    width: 60%;
    margin: auto;
    height: 90px;
    display: grid;
    align-items: center;
}

Ahora se verá centrado verticalmente con solo aplicarle los atributos display: grid; y align-items: center;.

1
  • Gracias esa propiedad fue la que funciono. el 20 abr. 2020 a las 17:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.