Vertical-align - Propriété CSS

Schéma de la syntaxe de vertical-align.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• length est une valeur numérique suivie d'une des unités de dimension (la plupart du temps une unité relative à la taille des caractères).
• % est un pourcentage calculé par rapport à la hauteur de la ligne.

Description de la propriété vertical-align.

La propriété vertical-align définit l'alignement vertical d'un élément. Cette propriété peut être utilisée notamment pour gérer l'alignement vertical du texte dans une cellule de tableau ou positionner les éléments les uns par rapport aux autres sur une même ligne de texte (éléments inline).

Dans ce dernier cas, voici comment interpréter les différentes valeurs :

Une curiosité.

Lorsque la ligne comporte des éléments de tailles différentes, ou lorsque la hauteur de ligne est fixée, le comportement de la valeur text-top est inattendu : dans l'exemple ci-dessous, le troisième élément ne semble pas du tout aligné sur le haut du texte. La raison est que text-top aligne par rapport au haut du texte de l'élément lui-même, et non pas par rapport au haut du texte le plus grand. Dans l'exemple ci-dessous le trait rouge matérialise le haut de ligne.

Apb   aligné sur top   aligné sur text-top

Nouvelle définition de vertical-align. ⚠

Le niveau 3 de la spécification CSS Inline Layout Module Level 3 donne une nouvelle définition pour la propriété vertical-align. Celle-ci est maintenant définie comme une propriété résumée équivalente aux propriétés suivantes :

• alignment-baseline
• baseline-source
• baseline-shift

Voici à quoi correspondent ces lignes :

• alphabetic : utilisées dans les langues latines, grecques, cyrillique, etc, cette ligne de base correspond au bas des principales lettres.
  
• cap-height : correspond au sommet des lettre majuscules en latin, cyrillique, grec et quelques autre languages.
  
  
• x-height : correspond au sommet des lettre minuscules (comme le x, dans les langues latine, cyrillique, grecque, etc.
  
  
• x-middle : correspond au milieu de la lettre x, autrement dit c'est une ligne située à égale distance de la ligne alphabetic et de la ligne x-height dans les langues latine, cyrillique, grecque, etc.
  
  
• ideographic-under et ideographic-over : correspond aux lignes de base et de sommet pour les caractères CJK.
  
  
• central : correspond à une ligne située à étale distance entre ideographic-under et ideographic-over.
  
  
• hanging : correspond à la ligne sur laquelle les caractères tibétains semble suspendus.
  
  
• math : correspond à la ligne de base centrale autour de laquelle les caractères mathématiques sont construits.
   
• text-over et text-under: correspond à la ligne au dessus et en dessous d'une boîte inline.
   

Valeurs pour vertical-align.

Dans tous les exemples qui suivent, les éléments bleus sont alignés avec vertical-align. L'élément Aa noir sert de référence.
Les nouvelles valeurs introduites dans le niveau 3 de la spécification, ne sont pas encore listées.

• vertical-align: baseline;

  Valeur par défaut pour l'alignement des balises inline.
  La ligne de base de l'élément est alignée sur la ligne de base du parent.

  Si l'élément n'a pas de ligne de base, c'est à dire s'il ne contient pas de texte, comme une image par exemple, c'est le bas de l'élément qui sert pour l'alignement.

  Rappel : la ligne de base du texte si situe au bas des lettres sans jambage.

  

  Aa Aa

  Cellule de tableau

• vertical-align: top;

  Éléments inline : le haut de l'élément est aligné sur le haut du parent.
  Cellules de tableau : le contenu est positionné en haut de la cellule.

  Aa Aa

  Cellule de tableau

• vertical-align: middle;

  Éléments inline : aligne le milieu de l'élément (dans le sens vertical) avec la ligne de base du texte + une demie hauteur des minuscules.
  Autrement dit, l'élément est centré verticalement par rapport aux minuscules.

  

  Cellules de tableau : le contenu est positionné au milieu de la cellule. C'est la valeur par défaut pour l'alignement des cellules.

  Aa Aa

  Cellule de tableau

• vertical-align: bottom;

  Éléments inline : le bas de l'élément est aligné sur le bas du parent.
  Cellules de tableau : le contenu est positionné en bas de la cellule.

  Aa Aa

  Cellule de tableau

• vertical-align: text-top;

  Éléments inline : l'alignement se fait sur le haut du texte.
  Cellules de tableau : valeur non gérée.

  Aa Aa
• vertical-align: text-bottom;

  Éléments inline : l'alignement se fait sur le bas du texte.
  Cellules de tableau : valeur non gérée.

  Aa Aa
• vertical-align: super;

  Éléments inline : la ligne de base de l'élément est positionnée comme un exposant du parent.
  Cellules de tableau : valeur non gérée.

  Aa Aa
• vertical-align: sub;

  Éléments inline :la ligne de base de l'élément est positionnée comme un indice du parent.
  Cellules de tableau : valeur non gérée.

  Aa Aa
• vertical-align: 0.2em;

  Éléments inline : l'élément est déplacé de la valeur indiquée par rapport à la ligne de base du texte, vers le haut si la valeur est positive et vers le bas pour une valeur négative.
  Cellules de tableau : valeur non gérée.

  La valeur est un nombre positif ou négatif, suivi d'une unité de dimension (voir les unités de dimension). S'il s'agit d'un pourcentage, il est évalué d'après la hauteur de la ligne (line-height).

  Aa Aa
• vertical-align: initial; (baseline) vertical-align: inherit; vertical-align: revert; vertical-align: revertLayer; vertical-align: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemples d'utilisation de la propriété vertical-align.

Supprimer l'espace sous les images.

Quand on place une image dans un div avec un bordure, ou dans une cellule de tableau, on peut constater une petite marge en dessous de l'image. et ce même si la marge intérieure du bas (padding) du div est à 0px et même si la marge extérieure de l'image est également à 0px. Ce phénomène est très visible sur les images avec un arrière-plan différent de celui de la page.

Texte

Cette marge est due au fait que les images se comportent comme des caractères, et qu'il y toujours une marge en dessous des caractères (voir notre figure au chapitre description). Pour supprimer cette marge il suffit d'appliquer à l'image la propriété vertical-align avec la valeur bottom.

Texte

Exemple d'animation de vertical-align.

Un petit exemple visuel utilisant l'animation de la propriété vertical-align sur une série d'images. Pour donner cette impression "désordonnée", les animations sur chacune des images ont des durées différentes et une direction différente également.

Pour que l'amplitude des mouvements soit plus grande, la taille des caractères a été fixée à 2rem.

Exemple interactif avec la propriété vertical-align.

Alignement vertical d'une balise span dans une ligne de texte.

Abp texte

Alignement vertical d'une image dans une ligne de texte.

Abp

Alignement vertical dans une cellule de tableau

Compatibilité des navigateurs avec vertical-align.

Le tableau des compatibilités ci-dessous concerne la syntaxe première de vertical-align. La nouvelle définition de cette propriété en tant que propriété résumée n'est pas encore traitée par les navigateurs (2024).

1

Propriété
vertical-align

Estimation de la prise en charge globale.

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Chrome

Edge

Internet Explorer

Opéra

Firefox

QQ Browser

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété vertical-align.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Définition initiale de la propriété vertical-align dans la version 1 du langage CSS.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  La valeur inherit est acceptée.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Mise en page en ligne - Niveau 3

  A partir de cette version, vertical-align est une propriété résumée regroupant les valeurs de 3 autres propriétés.
  Plusieurs valeurs sont ajoutées : alphabetic, ideographic, central, mathematical, ainsi que les modificateurs first et last.
  

  18 Décembre 2014

  Document de travail.

  

  

  

Voir aussi, concernant les dispositions en ligne.

Le module de spécification dénommé "Module CSS - Mise en page en ligne", ou CSS Inline Layout Module en anglais, définit ce qui est relatif à l'alignement vertical, et à la disposition en ligne des éléments, que ce soit dans un objet SVG ou dans un document HTML. La propriété vertical-align est décrite dans ce module, ainsi que les propriétés suivantes :

Propriétés :