Skip to main content

Visit Mozilla.org

CSS:vertical-align

Un article de MDC.


« Référence CSS

[modifier] Résumé

La propriété vertical-align définit l'alignement vertical d'un élément en ligne ou d'une cellule de tableau.

[modifier] Syntaxe 

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> | inherit

[modifier] Valeurs (pour les éléments en ligne)

La plupart de ces valeurs alignent l'élément par rapport à son élément parent :

baseline 
Aligne la base de l'élément avec celle de son parent.
sub 
Aligne la base de l'élément avec la ligne de base indice de son parent.
super 
Aligne la base de l'élément avec la ligne de base exposant de son parent.
text-top 
Aligne le haut de l'élément avec le haut de la fonte de l'élément parent.
text-bottom 
Aligne le bas de l'élément avec le bas de la fonte de l'élément parent.
middle 
Aligne le milieu de l'élément avec le milieu des lettres bas de casse de son parent.
<length> 
Aligne la base de l'élément à la longueur donnée au-dessus de la ligne de base de son parent.
<percentage> 
Idem à la valeur <length>, où le pourcentage est calculé par rapport à la propriété line-height.

Pour les éléments n'ayant pas de ligne de base, c'est la marge basse qui est utilisée comme référence.

Cependant, deux valeurs alignent verticalement l'élément par rapport à une ligne entière, plutôt que par rapport à son parent :

top 
Aligne le haut de l'élément et de ses descendants avec le haut de la ligne entière.
bottom 
Aligne la bas de l'élément et de ses descendants avec le bas de la ligne entière.

Les valeurs négatives sont autorisées.

[modifier] Valeurs (pour les cellules de tableau)

baseline (et sub, super, text-top, text-bottom, <length> et <percentage>) 
Aligne la ligne de base de la cellule avec la base des toutes les autres cellules de la rangée, qui sont alignées par rapport à la ligne de base.
top 
Aligne le haut du padding de la cellule avec le haut de la rangée.
middle 
Centre la boîte padding de la cellule avec la rangée.
bottom 
Aligne le bas du padding de la cellule avec le bas de la rangée.

Les valeurs négatives sont autorisées.

[modifier] Exemples 

img {
       vertical-align: bottom;
}

[modifier] Notes

[modifier] Spécifications

[modifier] Compatibilité des navigateurs

[modifier] Voir également

line-height, text-align, margin (auto)

Récupérée de « http://developer.mozilla.org/fr/docs/CSS:vertical-align »