vertical-align
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
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 (
<img>
sur une ligne de texte) - 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 <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: 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
<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 de 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 en x (x-height).
<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.
Valeurs relatives à la ligne
Les valeurs suivantes alignent l'élément par rapport à la ligne entière plutôt que par rapport à leur parent :
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.
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.
Définition formelle
Valeur initiale | baseline |
---|---|
Applicabilité | éléments en ligne et à ceux qui sont des cellules de tableau. S'applique aussi à ::first-letter et ::first-line . |
Héritée | non |
Pourcentages | se rapporte à la hauteur de ligne de l'élément lui-même |
Valeur calculée | pour les valeurs exprimées en pourcentages ou en longueur, la longueur absolue, sinon, le mot-clé comme spécifié |
Type d'animation | une longueur |
Syntaxe formelle
vertical-align =
[ first | last ] ||
<'alignment-baseline'> ||
<'baseline-shift'>
<alignment-baseline> =
baseline |
text-bottom |
alphabetic |
ideographic |
middle |
central |
mathematical |
text-top
<baseline-shift> =
<length-percentage> |
sub |
super |
top |
center |
bottom
<length-percentage> =
<length> |
<percentage>
Exemples
Exemple simple
HTML
<div>
Une <img src="frame_image.svg" alt="link" width="32" height="32" /> image avec
un alignement par défaut.
</div>
<div>
Une
<img class="top" src="frame_image.svg" alt="link" width="32" height="32" />
image avec un alignement en haut du texte.
</div>
<div>
Une
<img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" />
image avec un alignement en bas du texte.
</div>
<div>
Une
<img class="middle" src="frame_image.svg" alt="link" width="32" height="32" />
image avec un alignement au milieu.
</div>
CSS
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
img.middle {
vertical-align: middle;
}
Résultat
Alignement vertical sur une boîte de ligne
HTML
<p>
top: <img style="vertical-align: top" src="star.png" /> middle:
<img style="vertical-align: middle" src="star.png" /> bottom:
<img style="vertical-align: bottom" src="star.png" /> super:
<img style="vertical-align: super" src="star.png" /> sub:
<img style="vertical-align: sub" src="star.png" />
</p>
<p>
text-top: <img style="vertical-align: text-top" src="star.png" /> text-bottom:
<img style="vertical-align: text-bottom" src="star.png" /> 0.2em:
<img style="vertical-align: 0.2em" src="star.png" /> -1em:
<img style="vertical-align: -1em" src="star.png" /> 20%:
<img style="vertical-align: 20%" src="star.png" /> -100%:
<img style="vertical-align: -100%" src="star.png" />
</p>
Résultat
Alignement vertical d'une cellule de tableau
HTML
<table>
<tr>
<td style="vertical-align: baseline">baseline</td>
<td style="vertical-align: top">top</td>
<td style="vertical-align: middle">middle</td>
<td style="vertical-align: bottom">bottom</td>
<td>
<p>
Elle voulait savoir si elle grandissait ou rapetissait, et fut tout
étonnée de rester la même; franchement, c'est ce qui arrive le plus
souvent lorsqu'on mange du gâteau; mais Alice avait tellement pris
l'habitude de s'attendre à des choses extraordinaires, que cela lui
paraissait ennuyeux et stupide de vivre comme tout le monde.
</p>
<p>
Aussi elle se remit à l'œuvre, et eut bien vite fait disparaître le
gâteau.
</p>
</td>
</tr>
</table>
CSS
table {
margin-left: auto;
margin-right: auto;
width: 80%;
}
table,
th,
td {
border: 1px solid black;
}
td {
padding: 0.5em;
font-family: monospace;
}
Résultat
Spécifications
Specification |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align |
Compatibilité des navigateurs
BCD tables only load in the browser