En esta lección se comentan los diferentes valores de la propiedad CSS vertical-align definidas en la recomendación CSS 2.1, publicada en junio de 2011.
Para ver el efecto de cada uno de los tipos de alineación, todos los ejemplos consisten en un párrafo que contiene:
Los fragmentos de texto sin alineación vertical se colocan de manera que las líneas bases de los fragmentos coincidan con la línea base del texto principal.
Esta es la alineación vertical predeterminada, que coincide con el valor baseline.
Los fragmentos de texto con alineación vertical baseline se colocan de manera que las líneas bases de los fragmentos coincidan con la línea base del texto principal.
Esta es la alineación vertical predeterminada.
Los fragmentos de texto con alineación vertical middle se colocan de manera que las líneas medias de los fragmentos coincidan con la línea media del texto principal.
Los fragmentos de texto con alineación vertical sub se colocan en la posición habitual de los subíndices, es decir un poco más abajo de la línea base del texto principal.
Los fragmentos de texto con alineación vertical super se colocan en la posición habitual de los superíndices, es decir un poco más arriba de la línea base del texto principal.
Los fragmentos de texto con alineación vertical text-bottom se colocan de manera que las posiciones donde se situarían sus subrayados prácticamente coincidan con el subrayado del texto principal.
En el ejemplo siguiente se ha incluido en el párrafo un segmento vertical de color azul más grande que el texto que hace que el tamaño del párrafo sea mayor. De esta manera se puede observar mejor que los elementos con alineación text-bottom se alinean con el texto del párrafo.
Los fragmentos de texto con alineación vertical text-top se colocan de manera que las posiciones donde se situarían sus suprayados prácticamente coincidan con el suprayado del texto principal.
En el ejemplo siguiente se ha incluido en el párrafo un segmento vertical de color azul más grande que el texto que hace que el tamaño del párrafo sea mayor. De esta manera se puede observar mejor que los elementos con alineación text-top se alinean con el texto del párrafo.
Los fragmentos de texto con alineación vertical bottom se colocan de manera que sus bordes inferiores coincidan con el borde inferior del texto principal.
En el ejemplo siguiente se ha incluido en el párrafo un segmento vertical de color azul más grande que el texto que hace que el tamaño del párrafo sea mayor. De esta manera se puede observar mejor que los elementos con alineación bottom se alinean con el borde inferior del párrafo.
Los fragmentos de texto con alineación vertical top se colocan de manera que sus bordes superiores coincidan con el borde superior del texto principal.
En el ejemplo siguiente se ha incluido en el párrafo un segmento vertical de color azul más grande que el texto que hace que el tamaño del párrafo sea mayor. De esta manera se puede observar mejor que los elementos con alineación top se alinean con el borde superior del párrafo.