Valores

Para cada uno de los siguientes valores, lo aplicaremos a una imagen en línea dentro de un cuadro de línea de un elemento de lista. El cuadro de línea en cada una de las imágenes tiene un borde gris punteado. La línea que se usa para alinear las imágenes para cada valor es roja.

línea de base Este es el valor predeterminado. Alinea la línea de base del elemento con la línea de base del cuadro de línea. Si el elemento no tiene una línea de base, alinea el borde del margen inferior con la línea de base.

middle Alinea el punto medio vertical del elemento con la línea base de la línea más la mitad de la altura x de la línea (determinada por el fuente).

Este es uno de los valores más utilizados para vertical-align propiedad, y generalmente se usa para alinear iconos y marcadores de lista con el texto en línea.

sub Baja la línea de base del elemento a la posición adecuada para los subíndices en la línea. (Este valor no afecta al tamaño de fuente del texto del elemento).

super Eleva la línea base del elemento a la posición adecuada para superíndices en la línea. (Este valor no afecta el tamaño de fuente del texto del elemento).

text-top Alinea la parte superior del elemento con la parte superior del área de contenido de la línea. La altura del área de contenido es lo suficientemente alta para los máximos ascendentes y descendentes de todas las fuentes de la línea, y la línea de alineación es la parte superior de esa altura. Tenga en cuenta que la altura puede ser mayor que cualquiera de los tamaños de fuente involucrados, dependiendo de la alineación de línea de base de las fuentes.

text-bottom Alinea la parte inferior del elemento con la parte inferior del área de contenido de la línea. La altura del área de contenido es lo suficientemente alta para el máximo de descendentes y ascendentes de todas las fuentes de la línea, y la línea de alineación es la parte inferior de esa altura. Tenga en cuenta que la altura puede ser mayor que cualquiera de los tamaños de fuente involucrados, dependiendo de la alineación de referencia de las fuentes.

top Alinea la parte superior del elemento con la parte superior del línea completa. Esto significa que si hay otros elementos en la línea, cada uno con diferentes alturas, como varias imágenes, por ejemplo, la parte superior de la línea será tan alta como la más alta de las dos imágenes.

Si la línea tiene un conjunto explícito line-height que sea más alto que el contenido más alto en la línea, la parte superior del cuadro de línea será determinada por esa altura.

bottom

Alinea el elemento al final de toda la línea.

Si la línea tiene un line-height que sea más bajo que el contenido más bajo en la línea, la parte inferior del cuadro de línea estará determinada por esa altura.

< porcentaje > Eleve el elemento por encima de la línea de base (si el valor porcentual es positivo) o baje el elemento de abajo la línea de base (si el valor porcentual es negativo) por la cantidad especificada. La cantidad especificada es un porcentaje del valorline-height. El valor0%significa lo mismo quebaseline.

< length > Eleve el elemento por encima de la línea de base (si el valor de longitud es positivo) o baje el elemento por debajo de la línea de base (si el valor de longitud es negativo) por la cantidad especificada. Un valor «0» significa lo mismo quebaseline.

Notas

Los valores top, bottom y middle se comportan como se esperaba cuando se aplican a elementos de celda de tabla. Sin embargo, otros valores pueden tener un comportamiento inesperado en algunos navegadores. Chris Coyier lo dice mejor:

Cuando se usa la alineación vertical en las celdas de la tabla, la mejor opción es ceñirse a la parte superior, inferior y central. Ninguno de los otros valores tiene mucho sentido de todos modos y tienen resultados impredecibles entre navegadores. Por ejemplo, establecer una celda en el texto inferior alinea el texto con la parte inferior en IE 6 y con la parte superior en Safari 4. Si se establece en sub, se produce una alineación intermedia en IE 6 y superior en Safari 4.

La alineación vertical predeterminada para las celdas de la tabla (<td>) es middle. Sin embargo, la alineación vertical predeterminada para un elemento a nivel de bloque que tiene display: table-cell sigue siendo top, que es la alineación predeterminada para el nivel de bloque contenedores en general. Consulte la sección de demostración a continuación para ver un ejemplo en vivo.