A la hora de trabajar con divs en Html y CSS va a ser habitual que te surja la necesidad de alinear dos o más divs verticalmente, ya sea con respecto a sus centros o su parte de abajo. Por defecto te aparecerán alienados arriba.
Primero hay que tener en cuenta que los divs que queramos alinear deben estar contenidos en un div «padre» que será sobre el que definiremos las propiedades en CSS para lograr alinear los «hijos». Además, si el div padre tiene asignado un tamaño, deberá ser mayor que el de los divs hijos, de otra forma no funcionaria la alineación.
Las propiedades CSS necesarias para el div padre son «display«, justify-content» y «align-items«.
La propiedad «display» especifica el comportamiento del elemento, por defecto su valor es «inline». Para conseguir centrar los divs hijos con respecto a sus centros verticales es necesario fijar la propiedad en «flex«. Esto convierte al div padre en una flexbox, donde los elementos hijos tienen más «libertad de movimiento» y posicionarlos resulta más sencillo.
La propiedad «justify-content» hace referencia a la alineación horizontal de los elementos. En esta propiedad podemos poner varios valores en función del aspecto que queramos lograr:
- justify-content: flex-start; — Valor por defecto, los items comienzan alineados a la izquierda, sin ninguna separación entre ellos.
- justify-content: flex-end; — Alinea los items la derecha, sin separación entre ellos.
- justify-content: center; — Alinea los items en el centro, sin separación entre ellos.
- justify-content: space-between; — Coloca el primer item a la izquierda, y el último a la derecha, distribuyendo el resto por el espacio sobrante.
- justify-content: space-around; — distribuye los items en el espacio disponible dejando la misma separación en todos ellos a ambos lados.
Por último, la propiedad «align-items» es la que alineará los elementos verticalmente. Los valores más interesantes de esta propiedad para el caso que nos ocupa son «center«, que alineara los elementos con respecto a sus centros verticales, y «baseline», que lo hará con respecto a la parte de abajo de los elementos. Esta propiedad puede tomar más valores que puedes consultar en MDN web docs.
En resumen, para alinear elementos sobre sus centros verticales y centrarlos en el espacio, tendríamos que añadir las siguientes propiedades al div padre:
#divPadre {
display: flex;
justify-content: center;
align-items: center;
}
Para dar espacio entre los divs hijos, como en la imagen del comienzo del post, se pueden establecer márgenes en los elementos hijos o cambiar la propiedad justify-content a una que distribuya los elementos en todo el espacio disponible.
Coding 101 