CSS basic tutorial

CSS box model

CSS3Tutoriel de base

CSS reference manual

CSS @rule (RULES)

Blanc CSS-space(espace)Ligne CSS-height(hauteur de ligne)

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 first. An example is provided at the bottom of the article to help you quickly understand and master this property.

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	Il aligne la ligne de base de l'élément avec la ligne de base de l'élément parent. C'est la valeur par défaut.
length	Il est utilisé pour augmenter ou diminuer la longueur de l'élément selon une longueur spécifiée. Les valeurs négatives peuvent également être utilisées.
%	Il est utilisé pour augmenter ou diminuer l'élément en pourcentage de la propriété 'hauteur de ligne'. Les valeurs négatives sont autorisées.
sub	Il aligne l'élément comme s'il était en indice.
super	Il aligne l'élément comme s'il était en exposant.
top	Le haut de l'élément est aligné avec le haut de l'élément le plus haut de la ligne.
bottom	Le bas de l'élément est aligné avec l'élément le plus bas de la ligne.
text-top	Le haut de l'élément est aligné avec le haut de la police de l'élément parent.
middle	L'élément est placé au milieu de l'élément parent.
text-bottom	Le bas de l'élément est aligné avec le bas de la police de l'élément parent.
initial	Cette propriété est définie sur sa valeur par défaut.
inherit	Cette propriété est héritée de l'élément parent.

Exemple en ligne de vertical-align CSS

Exemple

<!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="motif en cœur"/>　Ceci est une image avec l'alignement par défaut.</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-top;"　alt="motif en cœur"/>　Ceci est une image avec l'alignement du texte en haut.</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-bottom;"　alt="motif en cœur"/>　Ceci est une image avec l'alignement du texte en bas.</p>　　
</body>　　
</html>

Voyons si ça marche‹/›

Sortie :

Ceci est une image avec l'alignement par défaut.

Ceci est une image avec l'alignement du texte en haut.

Ceci est une image avec l'alignement du texte en bas.

Blanc CSS-space(espace)Ligne CSS-height(hauteur de ligne)