vertical-align

Syntaxe

Paramètres

Description

Cette propriété permet de spécifier le déplacement vertical d'un texte : Vert le haut, le bas, au milieu,....

Remarques

• Alignement des éléments inline et inline-block : La propriété vertical-align est principalement utilisée pour aligner les éléments inline, inline-block ou les cellules de tableau par rapport à leur ligne de base ou à d'autres éléments. Elle ne fonctionne pas directement sur des éléments de type bloc (comme <div>), sauf si leur affichage est modifié via display: inline-block.
• Alignement relatif à la ligne de base : Par défaut, vertical-align aligne les éléments inline sur la ligne de base du parent. Les valeurs comme baseline, top, et bottom permettent de positionner l'élément respectivement sur la ligne de base, au sommet ou en bas de la boîte du parent. Cela est utile pour positionner des images ou des icônes dans un texte.
• Utilisation avec des valeurs relatives : vertical-align accepte également des valeurs relatives comme des pourcentages ou des unités absolues (exemple 10px ou 20%). Ces valeurs déplacent l'élément verticalement par rapport à sa position d'origine. Par exemple, vertical-align: 50%; déplace l'élément de la moitié de la hauteur de la boîte parent.
• Alignement dans les cellules de tableau : Dans les contextes de tableau, vertical-align est souvent utilisé pour aligner le contenu des cellules (<td> ou <th>) verticalement. Les valeurs courantes comme middle, top, ou bottom permettent de définir précisément l'emplacement du contenu dans la cellule.
• Valeurs spécifiques comme sub et super : Les valeurs sub et super sont conçues pour les éléments inline et sont utiles dans les textes scientifiques ou mathématiques. Par exemple, elles permettent de positionner des indices ou des exposants (H₂O ou E = mc²) de manière appropriée.
• Impact limité aux conteneurs inline : La propriété vertical-align n'affecte que les éléments inline ou inline-block à l'intérieur d'un conteneur de ligne. Si elle est appliquée sur un élément bloc sans changement de type d'affichage, elle n'aura aucun effet visible. Pour aligner des blocs verticalement, d'autres méthodes comme flexbox ou grid doivent être utilisées.
• Compatibilité avec les images et le texte : L'un des cas d'utilisation les plus courants est d'aligner des images ou des icônes à côté d'un texte. Par défaut, une image inline est alignée sur la ligne de base, ce qui peut provoquer un léger décalage visuel. Utiliser vertical-align: middle; corrige souvent ce problème.
• Dépendance au contexte parent : Le comportement de vertical-align dépend fortement de la boîte parent de l'élément cible. Par exemple, dans un contexte de cellule de tableau, la valeur middle centre le contenu par rapport à la hauteur totale de la cellule, tandis que dans une ligne de texte, elle centre l'élément par rapport à la hauteur de la ligne.