Vertical-Align (propriété CSS)

Définit le positionnement vertical d'un élément. Cette propriété peut être utilisée notamment pour gérer l'alignement vertical du texte dans une cellule de tableau ou positionner les éléments les uns par rapport aux autres sur une même ligne de texte.

Dans ce dernier cas, voici comment interprêter les différentes valeurs :

Valeurs pour Vertical-Align appliquée à une cellule de tableau.

Middle	Le contenu de la cellule est positionné au milieu.
Top	Le contenu de la cellule est calé en haut de celle-ci.
Bottom	Le contenu de la cellule est calé en bas de celle-ci.
Inherit	Même valeur que celle de l'élément parent.

Valeurs pour Vertical-Align appliquée à une image.

Baseline	Positionnement normal de l'élément.
Middle	Le milieu de l'élément est aligné sur le milieu de la ligne de texte.
Sub	Le bas de l'élément est un peu en dessous du bas de la ligne de texte (en indice).
Super	Le bas de l'élément est un peu en dessus du haut de la ligne de texte (exposant).
Top	Le haut de l'élément est aligné sur le haut du parent.
Text-Top	Le haut de l'élément est aligné sur le haut de la ligne de texte.
Bottom	Le bas de l'élément est aligné sur le bas du parent.
Text-Bottom	Le bas de l'élément est aligné sur le bas de la ligne de texte.
[Valeur][Unité]	Le bas de l'élément est aligné sur le bas de la ligne de texte.
[Valeur]%	Le bas de l'élément est aligné sur le bas de la ligne de texte.
Inherit	Même valeur que celle de l'élément parent.

Exemples.

Sur les exemples ci-dessous, la propriété Text-Align est utilisée pour positionner le contenu à l'intérieur d'une cellule.

Vertical-Align: Middle;

Vertical-Align: Top;

Vertical-Align: Bottom;

Sur les exemples ci-dessous, la propriété Vertical-Align est appliquée à des parties de texte (balise <SPAN>).

Vertical-Align: Baseline; (valeur par défaut)

Parent Texte

Vertical-Align: Middle;

Parent Elément

Vertical-Align: Sub;

Parent Elément

Vertical-Align: Super;

Parent Elément

Vertical-Align: Top;

Parent Elément

Vertical-Align: Text-Top;

Parent Elément

Vertical-Align: Bottom;

Parent Elément

Vertical-Align: Text-Bottom;

Parent Elément

Vertical-Align: 10pt;

Parent Elément

Vertical-Align: -50%;

Parent Elément

Sur les exemples ci-dessous, la propriété Vertical-Align est appliquée aux deux images (balise <IMG>).

Vertical-Align: Baseline; (valeur par défaut)

Parent Vertical-Align:Baseline

Vertical-Align: Middle;

Parent Vertical-Align:Middle

Vertical-Align: Sub;

Parent Vertical-Align:Sub

Vertical-Align: Super;

Parent Vertical-Align:Super

Vertical-Align: Top;

Parent Vertical-Align:Top

Vertical-Align: Text-Top;

Parent Vertical-Align:Text-Top

Vertical-Align: Bottom;

Parent Vertical-Align:Bottom

Vertical-Align: Text-Bottom;

Parent Vertical-Align:Text-Bottom

Vertical-Align: 10pt;

Parent Vertical-Align:10pt

Vertical-Align: -50%;

Parent Vertical-Align:-50%

Pour toute utilisation des informations de cette page, reportez vous au copyright