CSS basic tutorial

CSS box model

CSS3Tutoriales básicos

CSS reference manual

CSS @rule (RULES)

blanco de CSS-espacio(espacio en blanco)línea de CSS-height(altura de línea)

CSS vertical-align (vertical alignment)

CSS vertical-The align vertical alignment attribute is used to define the vertical alignment of embedded or table cell frames. vertical-Align is one of the important features of CSS. It may be difficult for beginners to master at the beginning, and examples are provided at the bottom of the article to help you quickly understand and master this attribute.

What can it do

It applies to inline or inline block elements.
It affects the alignment of the elements without affecting their content. (Except for table cells)
When applied to table cells, it affects the content of the cells, not the cells themselves.

CSS vertical-align vertical alignment value

value	description
base line	Alinea la línea base del elemento con la línea base del elemento padre. Este es el valor predeterminado.
longitud	Se utiliza para aumentar o disminuir la longitud del elemento según la longitud especificada. También se pueden usar valores negativos.
%	Se utiliza para aumentar o disminuir el elemento en porcentajes del atributo 'height' de línea. Permite valores negativos.
sub	Alinea el elemento, como si fuera un subíndice.
super	Alinea el elemento, como si fuera un superíndice.
top	Alinea la parte superior del elemento con la parte superior del elemento más alto de la línea.
bottom	Alinea la parte inferior del elemento con el elemento más bajo de la línea.
text-top	La parte superior del elemento está alineada con la parte superior de la fuente del elemento padre.
middle	El elemento se coloca en el medio del elemento padre.
text-bottom	La parte inferior del elemento está alineada con la parte inferior de la fuente del elemento padre.
initial	Establece este atributo en su valor predeterminado.
inherit	Hereda este atributo de su elemento padre.

Ejemplo en línea de alineación vertical de CSS

Ejemplo

<!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
img.top　{　　
　　　　vertical-align:　text-top;　　
}　　
img.bottom　{　　
　　　　vertical-align:　text-bottom;　　
}　　
</style>　　
</head>　　
<body>　　
<p><img　src="/run/images/heart.jpg"　alt="patrón de corazón"/>　Esta es la imagen con alineación predeterminada.</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-top;"　alt="patrón de corazón"/>　Esta es la imagen con alineación de texto superior.</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-bottom;"　alt="patrón de corazón"/>　Esta es la imagen con alineación de texto inferior.</p>　　
</body>　　
</html>

Prueba y mira‹/›

Salida:

Esta es la imagen con alineación predeterminada.

Esta es la imagen con alineación de texto superior.

Esta es la imagen con alineación de texto inferior.

blanco de CSS-espacio(espacio en blanco)línea de CSS-height(altura de línea)