CSS: Para qué sirve vertical-align

Probablemente todos hemos intentado alguna vez utilizar vertical-align para centrar verticalmente un contenido ( por ejemplo, un texto ) dentro de un div.

En la imagen anterior, aunque apliquemos vertical-align: middle al div contenedor o al bloque de texto, no va cambiar nada. En los dos casos el navegador ignora esta propiedad porque no aplica a esta situación.

Entonces, ¿para qué sirve vertical-align?

Esta propiedad se define en el estándar CSS2 del W3C como aplicable sólo a elementos inline y table-cell. Esta es la razón por la que no funciona para centrar el ejemplo anterior, porque no puede aplicarse a elementos de bloque.

Además, por si el nombre no era ya bastante confuso, la propiedad tiene diferente significado según se aplique a elementos inline o a elementos con display: table-cell, por lo que veremos los dos casos por separado.

Los valores que puede tomar son:

Valores: baseline | top |  bottom | text-top | text-bottom | middle | sub | super | <porcentaje %> | <longitud (px, cm, etc)> | inherit

vertical-align para elementos inline

Sirve para establecer la posición vertical de un elemento con respecto a la línea en la que se encuentra.
En la siguiente figura podemos ver 6 líneas imaginarias que son importanes para entender lo que significa cada uno de los valores de esta propiedad:

Las líneas top y bottom quedan siempre por encima y por debajo, respectivamente, de todo el contenido. Si no hay imágenes, estas líneas pueden coincidir con text-top y text-bottom.

Las líneas text-top y text-bottom quedan por encima y por debajo, respectivamente, del punto más alto (o bajo) del texto, incluyendo símbolos y acentos.

La línea middle se coloca justo en el centro de la altura de las letras minúsculas (se toma la letra ‘x’ como referencia).

Baseline es la línea sobre la que se apoya el texto.

En los siguientes ejemplos veremos cómo se alinea una imagen y un texto (en gris) con respecto a una línea de texto sin modificar (en negro), al cambiarles el vertical-align.

El HTML sería este:

 
  This is the default linedefault alignment 
  

Al elemento <p> le pondremos un borde azul, a los dos elementos que modificaremos con el vertical-align les ponemos borde naranja y al texto por defecto del párrafo, un borde gris.

Sin ningún vertical-align, se vería así:

Para cada uno de los valores posibles de la propiedad tendríamos:

baseline

Este caso es igual a la imagen sin vertical-align que veíamoss arriba, porque este es el valor que se muestra por defecto. La baseline del texto en gris y la base de la imagen se alinean con la baseline del texto sin modificar del elemento padre ( el <p>).

top

La parte superior de los elementos se alinean respecto al punto más alto de la línea ( sea imagen o texto ).

 

bottom

La parte inferior de los elementos se alinean respecto al punto más bajo de la línea ( sea imagen o texto ).

text-top

Los elementos se alinean con el punto más alto del texto. Es importante tener en cuenta que quizá la letra que tiene el punto más alto en nuestra fuente no aparece en nuestro texto. Aun así, la colocación se realiza respecto a ese punto más alto. Las letras más altas normalmente son las mayúsculas acentuadas.

text-bottom

Caso apuesto a text-top, los elementos se alinean con la parte más baja del texto. No es lo mismo que baseline porque en este caso vamos más abajo, incluyendo las líneas que bajan por debajo de la línea de base ( letras como p, j, g, etc).

middle

En este caso el navegador trata de alinear el centro vertical de los elementos con el centro del texto del padre ( el párrafo <p>).

 Lo que los navegadores hacen es alinear el centro vertical del elemento (de su caja) con la línea de base ( baseline ) del texto del padre más la mitad de la altura de la x. Visualmente puede no ser exactamente lo que esperamos porque, al no haber letras con partes descendentes, parece un poco descentrado.

super

Se utiliza para posicionar algo como superíndice.

sub

Se utiliza para posicionar algo como subíndice.

porcentaje

Eleva la posición del elemento en el porcentaje indicado. Es un porcentaje de la altura de la caja del propio elemento que tiene el vertical-align, por eso la imagen y el texto están a alturas diferentes. El valor puede ser negativo, en ese caso la posición baja. El valor 0% corresponde a la baseline.

Longitud en pixels o otras unidades

Eleva la posición del elemento en las unidades indicadas (px, cm, etc). El valor puede ser negativo, en ese caso la posición baja. El valor 0 corresponde a la baseline.

vertical-align para celdas de una tabla o elementos con display:table-cell

En el contexto de celdas de una tabla esta propiedad tiene un significado diferente. Sirve para definir como se alinea verticalmente el contenido de una celda. En este contexto sólo aplican los valores middle, top y bottom.

Para celdas de una tabla ( <table> ) el valor por defecto es middle, pero para un div con display:table-cell, el valor por defecto es top.

La siguiente imagen muestra como queda un bloque de texto con cada uno de los valores: