Propriété CSS vertical-align
La propriété vertical-align spécifie l'alignement vertical d'une boîte inline, inline-block ou table-cell. Les éléments de niveau inline incluent les images, le texte, les boutons, etc.
Cette propriété ne fonctionne que dans les contextes suivants :
- Pour aligner verticalement le contenu à l'intérieur des cellules de tableau (
<td>) et des éléments avecdisplay: table-cell. - Pour aligner verticalement la boîte d'un élément inline à l'intérieur de sa boîte de ligne. Par ex., elle peut être utilisée pour aligner verticalement
<img>dans une ligne de texte.
Nous ne pouvons pas utiliser la propriété vertical-align pour aligner verticalement des éléments de niveau bloc. Remarque : elle ne centre pas les enfants de niveau bloc ; utilisez margin: 0 auto ou Flexbox/Grid pour cela.
| Valeur initiale | baseline |
|---|---|
| S'applique à | Éléments de niveau inline et table-cell, s'applique également à ::first-letter et ::first-line. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.verticalAlign = "middle"; |
Syntaxe
Syntaxe de la propriété CSS vertical-align
css
vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;Exemple de la propriété vertical-align avec la valeur « sub » :
Exemple de la propriété CSS vertical-align avec la valeur sub
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: sub;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>Résultat
Exemple de la propriété vertical-align avec la valeur « middle » :
Exemple de la propriété CSS vertical-align avec la valeur middle
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>Exemple de la propriété vertical-align avec la valeur « super » :
Exemple de la propriété CSS vertical-align avec la valeur super
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: super;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>Exemple de la propriété vertical-align avec les valeurs « top » et « bottom » :
Exemple de la propriété CSS vertical-align avec les valeurs top et bottom
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid #cccccc;
}
td {
height: 100px;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<table>
<tr>
<th>Bottom</th>
<th>Middle</th>
<th>Top</th>
</tr>
<tr>
<td class="bottom">Some text</td>
<td>Some text</td>
<td class="top">Some text</td>
</tr>
</table>
</body>
</html>Valeurs
| Valeur | Description | Essayer » |
|---|---|---|
| baseline | Aligne la ligne de base de l'élément avec celle de son parent. C'est la valeur par défaut. | Essayer » |
| length | Décale la ligne de base de la boîte vers le haut (valeur positive) ou vers le bas (valeur négative) par rapport à la ligne de base du parent. | Essayer » |
| sub | Abaisse la ligne de base de la boîte à la position appropriée pour les indices de la boîte parent. | Essayer » |
| super | Éléve la ligne de base de la boîte à la position appropriée pour les exposants de la boîte parent. | Essayer » |
| top | Aligne le haut de la sous-arbre aligné avec le haut de la boîte de ligne. | Essayer » |
| text-top | Aligne le haut de la boîte avec le haut de la zone de contenu du parent. | Essayer » |
| middle | Aligne le milieu vertical de la boîte avec la ligne de base de la boîte parent plus la moitié de la hauteur x du parent. | Essayer » |
| bottom | Aligne le bas de la sous-arbre aligné avec le bas de la boîte de ligne. | Essayer » |
| text-bottom | Aligne le bas de la boîte avec le bas de la zone de contenu du parent. | Essayer » |
| initial | Définit la valeur par défaut de la propriété. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété CSS 'vertical-align' ?