En este post vamos a aprender a alinear horizontal y verticalmente cualquier cosa con Flexbox. Si no sabes lo que es Flexbox o te suena pero no lo tienes claro, puedes usar este enlace a MDN.

Antes de nada, estos son todos los ejemplos que vamos a ir explicando.

Vamos entonces con el primer ejemplo:

01. Texto centrado horizontal y verticalmente dentro de un contenedor al 60% de ancho: En todos los ejemplos vamos a necesitar 2 divs. Uno será el contenedor y tendrá una clase llamada ‘contenedor’ + número del ejemplo. Dentro de este div tendremos otro div cuya clase se llamará ‘contenido’ + número del ejemplo. Finalmente colocaremos el o los elementos de HTML dentro del div ‘contenedor’ que queremos tener alineados. Usar 2 divs es necesario en Flexbox para alinear horizontal y/o verticalmente elementos.

El css que hace el trabajo de alineación en nuestro primer ejemplo es este. Puedes usarlo directamente en tu proyecto, pero te recomiendo analizarlo y hacer tus propias pruebas para tratar de entenderlo:

02. Texto centrado horizontal y verticalmente dentro de un contenedor al 100% de ancho: Este ejemplo es casi idéntico al anterior, salvo que ahora ocupamos el 100% del ancho disponible. Compara el css anterior con este:

03. Texto centrado horizontal y verticalmente dentro de un contenedor con un ancho fijo de 550px: En este ejemplo lo único que cambia es que el contenedor tiene un ancho fijo. No se ajustará al ancho del navegador y no seguirá las pautas del responsive design, pero puede ser útil en algunos casos y a nivel didáctico también tiene su función:

04. Diversos textos centrados horizontal y verticalmente dentro de un contenedor al 80% de ancho : A diferencia de los ejemplos anteriores, ahora estamos añadiendo varios textos (títulos) dentro de nuestro div ‘contenido’. Fíjate que en realidad tener uno o más elementos para ser alineados no supone cambios en la estructura de nuestras dos clases respecto a los casos anteriores:

05. Un div alineado horizontal y verticalmente dentro de un contenedor al 40% del ancho : En este ejemplo también notaremos que la estructura de nuestras dos clases css son prácticamente iguales a las anteriores. Hemos añadido una clase extra .color1 para dar color a nuestro div y que se distinga del fondo.

06. Diversos divs e imágenes alineados horizontal y verticalmente dentro de un contenedor al 50% de ancho : En este último ejemplo vemos cómo alternar divs con imágenes sin perder la alineación centrada horizontal y verticalmente, independientemente del ancho del navegador.

Aquí tienes todos los ejemplos explicados anteriormente.

Espero que te haya sido útil el tutorial y te invito a que sigas investigando sobre Flexbox, por ejemplo en w3schools.com.

 

 

Share:Tweet about this on TwitterShare on FacebookShare on Google+