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 :

CSS Vertical-Align

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

MiddleLe contenu de la cellule est positionné au milieu.
TopLe contenu de la cellule est calé en haut de celle-ci.
BottomLe contenu de la cellule est calé en bas de celle-ci.
InheritMême valeur que celle de l'élément parent.

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

BaselinePositionnement normal de l'élément.
MiddleLe milieu de l'élément est aligné sur le milieu de la ligne de texte.
SubLe bas de l'élément est un peu en dessous du bas de la ligne de texte (en indice).
SuperLe bas de l'élément est un peu en dessus du haut de la ligne de texte (exposant).
TopLe haut de l'élément est aligné sur le haut du parent.
Text-TopLe haut de l'élément est aligné sur le haut de la ligne de texte.
BottomLe bas de l'élément est aligné sur le bas du parent.
Text-BottomLe 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.
InheritMê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:Baseline

Vertical-Align: Middle;

Parent Vertical-Align:Middle Vertical-Align:Middle

Vertical-Align: Sub;

Parent Vertical-Align:Sub Vertical-Align:Sub

Vertical-Align: Super;

Parent Vertical-Align:Super Vertical-Align:Super

Vertical-Align: Top;

Parent Vertical-Align:Top Vertical-Align:Top

Vertical-Align: Text-Top;

Parent Vertical-Align:Text-Top Vertical-Align:Text-Top

Vertical-Align: Bottom;

Parent Vertical-Align:Bottom Vertical-Align:Bottom

Vertical-Align: Text-Bottom;

Parent Vertical-Align:Text-Bottom Vertical-Align:Text-Bottom

Vertical-Align: 10pt;

Parent Vertical-Align:10pt Vertical-Align:10pt

Vertical-Align: -50%;

Parent Vertical-Align:-50% Vertical-Align:-50%

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