Propiedad CSS vertical-align

Introducción

Índice

Introducción

Ejemplos

alineación vertical: línea base
alineación vertical: inferior
alineación vertical: medio
alineación vertical: sub
alineación vertical: super
alineación vertical: texto inferior
alineación vertical: texto superior
alineación vertical: superior

vertical-align define la alineación vertical del contenido de una celda de una tabla o de un elemento en línea respecto del resto del flujo en línea.

vertical-align puede tomar un valor de % o longitud , o puede tomar una de las siguientes 8 palabras clave:

baseline: El valor predeterminado. Línea base del elemento alineada con la línea base del elemento principal.
bottom:Parte inferior del elemento alineada con la parte inferior completa de la línea.
middle: Centro del elemento alineado a la mitad de la altura x del elemento principal. La altura x es la altura del texto sin los caracteres ascendentes ni descendentes.
sub:Línea base del elemento alineada con la línea base del subíndice del elemento principal.
super:Línea base del elemento alineada con la línea base superíndice del elemento principal.
text-bottom:Parte inferior del elemento alineada con la parte inferior del texto.
text-top:Parte superior del elemento alineada con la parte superior del texto.
top:Parte superior del elemento alineada con la parte superior de la línea.

Si se proporciona un valor de longitud , el elemento se alinea a la longitud especificada por encima de la línea base del elemento principal.

Si se proporciona un valor % , el elemento se alinea en el % especificado por encima de la línea base del elemento principal, donde el % es una referencia a la altura de la línea.

A continuación se muestra un ejemplo que utiliza la alineación vertical:

.avatar {  vertical-align: middle;}

Ejemplos

Puede resultar difícil visualizar los efectos de los diferentes valores de palabras clave para la alineación vertical, por eso aquí se muestran ejemplos con un emoji de concha marina en línea ( ) colocado con diferentes valores: