Diseño web: Centrado vertical de elementos

Comparteme!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

Es muy común tratar de centrar elementos de forma vertical en una página web. Para aquellos que conocemos un poco de HTML, probablemente nos encontramos con este tipo de diseños aparentemente básicos pero lleva su trabajo dependiendo del efecto que se desee.

Un Ejemplo

Para poner un ejemplo, un caso muy particular es cuando se tiene un “Banner” en un sitio web y se desea colocar un mensaje en el medio de este.

Banner de Ejemplo

Vamos a tratar al banner como si estuviese definido como background de una etiqueta div en HTML:

 codigo

Crearemos otra etiqueta div para colocar el texto dentro del div banner:

 codigo

 

Por ahora tendriamos algo asi:

banner ejemplo

Para centrar el texto en su línea horizontal no es mucho cuento, solo colocas la propiedad CSS llamada text-align con el valor de center:

codigo

Ahora a lo que vinimos, a centrarlo de forma vertical. Como te podrás haber dado cuenta, el div de la imagen le hemos estado dando una altura de 300px, por lo que explicaré algunas de las formas de centrarlo en varios escenarios (sin altura definida o con altura definida).

Banner con altura definida

Aprovechando que en el ejemplo antes planteado nos encontramos en presencia de este caso, les explicaré lo que a mi parecer son las mejores maneras de hacerlo:

  1. Se define una propiedad CSS en el div de la imagen llamada display con el valor de flex y la propiedad margin con el valor de auto en el div del texto:codigo

    Te quedaría de esta manera:
    banner ejemplo

  2. El mismo efecto lo obtendrás si le colocas al div de la imagen la propiedad display:table; width:100%; y al div del texto display:table-cell; vertical-align:middle;codigo

Banner con altura no definida

En el caso anterior el banner es de altura definida porque tiene un tamaño en pixeles (300px), que sería lo mismo si el tamaño viene dado en porcentajes (70% por ejemplo), pero si estamos en presencia de un banner al que no se le define altura, podrías hacer un poco de matemáticas, nada complicado.

Por ejemplo, la altura del banner puede venir dada por el texto contenido dentro:

banner ejemplo

Si te fijas, el banner se expande en altura según su contenido y el texto se mantiene centrado. Esto se logra usando la propiedad padding, especificamente padding-top y padding-bottom en el div de la imagen. Las únicas matemáticas que hay que hacer es, colocar la misma cantidad de padding tanto en el top, como en el bottom para lograr el efecto de estar centrado:

codigo

Estos son los que a mi parecer son los casos mas comunes, pero siempre habrán casos que tratar.

Si les ha sucedido algo parecido y no han podido resolverlo, les agradecería comenten el planteamiento y posiblemente suba otro artículo con la solución.

Comparteme!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

Recent Comments

Deja un comentario

A %d blogueros les gusta esto: