vertical-align
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété CSS vertical-align définit l'alignement vertical d'une boîte en ligne (inline), en ligne / bloc (inline-block) ou d'une boîte de cellule de tableau.
Exemple interactif
vertical-align: baseline;
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: sub;
vertical-align: text-top;
Align the star:
#default-example > p {
line-height: 3em;
font-family: monospace;
font-size: 1.2em;
text-decoration: underline overline;
}
La propriété vertical-align peut être utilisée dans deux contextes :
- Afin d'aligner verticalement la boîte d'un élément en ligne à l'intérieur de la boîte en ligne de son conteneur (par exemple pour aligner verticalement une image (
- ou pour aligner verticalement le contenu d'une cellule dans un tableau
vertical-align ne s'applique qu'aux cellules de tableaux, aux éléments en ligne (inline) ou en ligne / bloc (inline-block), elle ne peut pas être utilisée pour aligner verticalement les éléments de bloc.
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 */
vertical-align: 10em;
vertical-align: 4px;
/* Valeurs en pourcentage */
/* type */
vertical-align: 20%;
/* Valeurs globales */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;
La propriété vertical-align s'utilise avec une des valeurs suivantes.
Valeurs pour les éléments en lignes
Valeurs relatives au parent
Ces 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 remplacés, comme