Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Consulta como centrar box

Referente al curso Flexbox: Posicione elementos en la pantalla, en el capítulo Grid principal y limitaciones de Flexbox y actividad Empezando el grid

por RICARDO OSWALDO BOADO QUIROZ
| 66.1k xp | 41 posts
Fundador

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Una consulta, alguien sabe como centrar los 08 box según este diseño?,

h1{
    font-family:Arial;

}

body{
    background-color: rgb(0, 255, 255);
}

.box {
    color:white;
    font-family:Arial;
    height: 50px;
    width: 200px;
    background-color: rgb(198, 36, 47);
    font-size: 15px;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

  }

.grid{
    display: flex;
    justify-content: space-around;
    width: 70%;
    flex-wrap: wrap;
}
1 respuesta
por Bruno Botelho de Souza
| 3933.7k xp | 14897 posts
Alura Scuba Team Scuba Team | Front-end

Hola Ricardo, espero que estés bien.

Puedes crear una div que envuelva todos los box, poner una clase .container en ella. Y luego, en tu CSS definir un width: 100% y poner un display: flex junto con justify-content: center; y align-items: center; 

.container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

Esto va a centralizar tanto en la horizontal cuanto en la vertical.

Si tienes alguna duda, no dejes de preguntar. ¡Estamos aquí para ayudarte!.

¡Saludos!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios