vertical-align

La propriété vertical-align définit l'alignement vertical d'une boîte en ligne (inline) ou d'une cellule de tableau.

Valeur initialebaseline
Applicabilitééléments en ligne et à ceux qui sont des cellules de tableau. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Pourcentagesse rapporte à la hauteur de ligne de l'élément lui-même
Médiavisuel
Valeur calculéepour les valeurs exprimées en pourcentages ou en longueur, la longueur absolue, sinon, le mot-clé comme spécifié
Type d'animationune longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Avec un mot-clé */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* Valeurs de longueur */
/* type <length> */
vertical-align: 10em;
vertical-align: 4px;

/* Valeurs en pourcentage */
/* type <percentage> */
vertical-align: 20%;

/* Valeurs globales */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

Valeurs

Pour les éléments inline

Note :  La plupart des valeurs alignent l'élément verticalement, relativement à son élément parent.

baseline
Aligne la ligne de base de l'élément avec celle de son parent. La ligne de base de certains éléments replacés, comme <textarea>, n'est pas définie par la spécification HTML et le comportement de ce mot-clé peut donc changer d'un navigateur à un autre.
sub
Aligne la ligne de base sur la ligne de base inférieure (celle utilisée pour les indices) de l'élément parent.
super
Aligne la ligne de base sur la ligne de base supérieure (celle utilisée pour les exposants) de l'élément parent.
text-top
Aligne le haut de l'élément avec le haut le la police de l'élément parent.
text-bottom
Aligne le bas de l'élément avec le bas de la police de l'élément parent.
middle
Aligne le milieu de l'élément avec la hauteur donnée par la ligne de base de l'élément parent à laquelle on ajoute la moitié de sa hauteur.
<length>
Aligne la ligne de base de l'élément à la hauteur de la ligne de base de l'élément parent à laquelle on ajoute la hauteur donnée. Les valeurs négatives sont autorisées.
<percentage>
Fonctionne comme avec les valeurs de type <length>, le pourcentage indique une fraction de la propriété line-height. Les valeurs négatives sont autorisées.

Les valeurs suivantes alignent l'élément par rapport à la ligne entière (absolu) plutôt que par rapport à leur parent (relatif) :

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

Pour les éléments qui n'ont pas de ligne de base définie, c'est le bord de la marge basse qui est utilisée.

Pour les cellules de tableau

baseline, sub, super, text-top, text-bottom, <length> et <percentage>
La ligne de base de la cellule est alignée avec celle de toutes les autres cellules de la ligne courante qui sont alignées par rapport à la ligne de base. Les valeurs négatives sont autorisées.
top
Aligne le bord haut de la boîte de remplissage (padding) de la cellule avec le haut de la ligne.
middle
Centre la boîte de remplissage (padding) de la cellule avec la ligne.
bottom
Aligne le bord bas de la boîte de remplissage (padding) avec le bas de la ligne.

Exemple

HTML

<div>
  Une <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="une icone générique" width="32" height="32" />
  image alignée par défaut.
</div>
<div>
  Une <img class="haut" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />
  image alignée avec text-top.
</div>
<div>
  Une <img class="bas" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />
  image alignée avec text-bottom.</div>
<div>
  Une <img class="pourcents" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />
  image alignée avec 200%.
</div>

CSS

img.haut {
  vertical-align: text-top;
}
img.bas {
  vertical-align: text-bottom;
}
img.pourcents {
  vertical-align: 200%;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Transitions
La définition de 'vertical-align' dans cette spécification.
Version de travail vertical-align peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'vertical-align' dans cette spécification.
Recommendation Ajoute la valeur <length> et permet d'appliquer la propriété aux éléments dont display est de type table-cell.
CSS Level 1
La définition de 'vertical-align' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) (Oui) 4.0 4.0 1.0 (85)
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple 1.0 1.0 1.0 (1.0) (Oui) (Oui) (Oui) 1.0

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB, Fredchat, Kyodev
 Dernière mise à jour par : SphinxKnight,