Unidad 11. CSS. Fuente y texto. (VI)

11.11. vertical-align

En este vídeo explicamos la alineación vertical:

La propiedad vertical-align define la alineación vertical de un texto respecto a su contenedor. Sólo se puede aplicar a elementos inline, no a elementos de bloque. Se recomienda su uso para alinear texto dentro de celdas en tablas y de pequeños gráficos junto al texto. La propiedad vertical-align pueden aplicar los siguientes valores: baseline, sub, super, top, text-top, middle, bottom y text-bottom.

- sub, texto alineado verticalmente sin desplazamiento. vertical-align: sub. Ejemplo: texto alineado con "sub" verticalmente.

- super, texto alineado verticalmente sin desplazamiento. Ejemplo: texto alineado con "super" verticalmente.

- top, texto alineado verticalmente sin desplazamiento. Ejemplo: texto alineado con "top" verticalmente.

- text-top, texto alineado verticalmente sin desplazamiento. Ejemplo: texto alineado con "text-top" verticalmente.

- middle, texto alineado verticalmente sin desplazamiento. Ejemplo: texto alineado con "middle" verticalmente.

- bottom, texto alineado verticalmente sin desplazamiento. Ejemplo: texto alineado con "bottom" verticalmente.

- text-bottom, texto alineado verticalmente sin desplazamiento. Ejemplo: texto alineado con "text-bottom" verticalmente.

- valor numérico, texto alineado verticalmente sin desplazamiento. Ejemplo: texto alineado con "valor 0.3em" verticalmente.

- valor numérico, texto alineado verticalmente sin desplazamiento. Ejemplo: texto alineado con "valor -0.3em" verticalmente.

En la siguiente tabla se ha alineado el texto dentro de cada celda con la propiedad vertical-align y los valores que se indican:

<td style="vertical-align: baseline">

baseline

sub

super

top

middle

bottom

text-bottom

0.3em

-0.3em

En los siguientes ejemplos se ha alineado la imagen del círculo rojo con la propiedad vertical-align y los valores que se indican:

Ejemplo: imagen sin alineación vertical.

Ejemplo: imagen alineada con "baseline" verticalmente. <img src="comunes/redball.gif" style="vertical-align: baseline">

Ejemplo: imagen alineada con "sub" verticalmente.

Ejemplo: imagen alineada con "super" verticalmente.

Ejemplo: imagen alineada con "top" verticalmente.

Ejemplo: imagen alineada con "middle" verticalmente.

Ejemplo: imagen alineada con "bottom" verticalmente.

Ejemplo: imagen alineada con "0.3em" verticalmente.

Ejemplo: imagen alineada con "-0.3em" verticalmente.

El uso de vertical-align para subíndices y superíndices es equivalente a la utilización de las etiquetas <sub> y <sup>.