vertical-align
Aligne verticalement les éléments en ligne et le contenu des cellules de tableau.
- Valeur initiale
baseline- Héritée
- Non
- Animable
- oui, pour les longueurs et les pourcentages
- S’applique à
- éléments en ligne et cellules de tableau
- JavaScript
element.style.verticalAlign = "middle"
Exemple
#.icon {
width: 20px;
height: 20px;
vertical-align: -4px;
}<p style="margin: 0; font-size: 16px;">
<img class="icon" src="/collections/nextjs.png" alt="" width="20" height="20" style="vertical-align: -4px;">
Next.js dans le nouveau module du cours
</p>Définition et utilisation
#La propriété vertical-align agit dans deux contextes. Sur les éléments en ligne, comme des icônes ou des images dans du texte, elle les positionne par rapport à la ligne de texte : sur la ligne de base, au centre, en haut. Dans les cellules de tableau, elle aligne verticalement tout le contenu de la cellule.
Elle ne sert pas à centrer des blocs dans un conteneur. C’est un malentendu fréquent : vertical-align: middle sur un <div> ordinaire ne change rien. Pour cela, on utilise Flexbox ou Grid.
Un usage classique est une icône à côté d’un texte (middle), ou la suppression de l’espace sous une image en ligne qui s’appuie sur la ligne de base (vertical-align: top ou display: block).
Syntaxe
#vertical-align: baseline | middle | top | bottom | text-top | text-bottom | sub | super | <longueur> | <pourcentage>;Valeurs
#Valeurs en pratique
#baseline
.demo { vertical-align: baseline; }middle
.demo { vertical-align: middle; }top
.demo { vertical-align: top; }super
.demo { vertical-align: super; }-6px
.demo { vertical-align: -6px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour centrer un bloc verticalement, utilisez Flexbox ou Grid, pas
vertical-align. - Le petit espace sous une image à l’intérieur d’un bloc disparaît une fois l’image réglée en
display: blockouvertical-align: top.
Entrées associées
#- line-heightDéfinit la hauteur de chaque ligne de texte, l’espacement entre les lignes.
- text-alignAligne le texte horizontalement : à gauche, à droite, au centre ou sur les deux bords.
- align-itemsAligne les éléments sur l’axe secondaire d’un conteneur flex ou grid.
- displayDétermine comment un élément se comporte dans la mise en page de la page et comment il organise ses enfants.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.