Diseño Web

Cuando comenzamos a aprender maquetación HTML y CSS, al principio nos abruma la cantidad de etiquetas, atributos, y propiedades que tenemos a nuestra disposición para crear contenido web.

E inexorablemente en algún momento llegamos a un dilema difícil de creer… necesitamos centrar un contenido verticalmente dentro de otro . Tenemos una propiedad css vertical-align a la que podemos darle el valor middle.

Probamos un código como este...

Añadimos la propiedad No obtenemos el comportamiento deseado:

Asignar la propiedad vertical-align al contenido en lugar de al contenedor no cambia las cosas. ¿Qué está pasando?

El problema es que esta propiedad no hace lo que creemos . Su utilidad radica en indicar si cuando varios elementos se encuentran en una misma linea de texto, y tienen diferentes alturas, estos se alinearán entre sí desde el borde superior, inferior, centrado (y otras opciones).

Para conseguir el deseado alineado vertical entre contenido y contenedor , vamos a tener que utilizar alguno de los siguientes trucos:

Método 1: display: table-cell

El que menos código exige . Si alguien ha trabajado con tablas de datos, notará que las celdas de estas si que admiten cambiar fácilmente la alineación de su contenido. Podríamos por tanto decirle al contenedor que se comporte como una celda de tabla, añadiendo el siguiente código CSS en el CSS:

.contenedor1 {
        display: table-cell;
        vertical-align: middle;
        text-align: center; /* requerido para alineación horizontal */
}
.contenido1 {
        display: inline-block;
        text-align: left; /* requerido para volver a alinear texto izquierda */
}

Con este pequeño cambio, y eliminando la innecesaria propiedad vertical-align… de pronto ya todo funciona como deseamos.

• Pros: Muy poco código CSS / HTML que añadir
   
• Inconvenientes: Semánticamente, el contendor no es una celda de una tabla. Aunque estamos definiendo este comportamiento en CSS y no en HTML, muchos puristas no desearán utilizar esta medida.

Método 2: line-height 50% del alto del contenedor

Si hemos dicho que vertical-align sirve para alinear elementos dentro de una linea de texto, una opción es hacer que la línea sea tan grande como el contenedor , de forma que el contenido quede alineado en medio.

Con el código CSS:

.contenedor2 {
        line-height: 150px;
        text-align: center; /* requerido para alineación horizontal */
}
.contenido2 {
        line-height: 1;
        display: inline-block;
        vertical-align: middle;
        text-align: left; /* requerido para volver a alinear texto izquierda */
}

• Pros: Igualmente no mucho código, no tiene implicaciones semánticas
   
• Contra: Hay que conocer el alto en píxeles y especificarlo exactamente, no funciona indicando porcentaje de 50%.

Método 3: display: flex

Con la llegada de CSS3 (y HTML5 por supuesto) y flexbox , tenemos mecanismos avanzados que ya nos permiten controlar mejor situaciones como estas . Bajo este estándar, podemos utilizar un código como este:

.contenedor3 {
        display: flex;
        align-items: center;
}
.contenido3 {
        margin: 0 auto; /* requerido para alineación horizontal */
}

• Pros: Utilizamos los nuevos estándares para lo que fueron diseñados.
   
• Contra: No funciona en IE9 o inferior, y otros navegadores muy antiguos.

Recomendación final

Existen muchas otras alternativas para conseguir este efecto , que igualmente pueden ser opciones válidas en función de las circunstancias. Hemos elegido estas porque nos han parecido las más sencillas de implementar en cuanto a código, equilibradas con la compatibilidad con navegadores que ofrecen.

Con la reciente retirada del soporte a antiguas versiones de Internet Explorer por parte de Microsoft, nuestra recomendación final es utilizar el último método con flexbox , que tiene la mayor garantía de compatibilidad futura.

A continuación, el código completo con todos los ejemplos:

Si tienes conocimientos sobre maquetación web y quieres profundizar en los mismos, en nuestra plataforma online encontrarás interesantes cursos para ello, por ejemplo, el curso de Flexbox y CSS Grid, con el que aprenderás a maquetar la web de forma fácil y profesional. Accede ahora a este y muchos otros cursos de forma gratuita, gracias a los 15 días de prueba que te ofrecemos aquí.