Hauteur et alignement vertical

La hauteur de l'élément parent doit avoir une valeur statique (c'est-à-dire ni automatique ni pourcentage). Si la hauteur n'est pas spécifiée, le navigateur la calculera en fonction du contenu, ce qui peut conduire à des résultats inattendus.

Positionnement des éléments en ligne

Contrairement à text-align , qui s'applique à l'élément contenant au niveau du bloc, l'alignement vertical doit être appliqué à l'élément en ligne que vous souhaitez positionner.

Navigateur Différences

Les navigateurs plus anciens peuvent ne pas prendre en charge l'alignement vertical de manière cohérente. Cependant, les navigateurs modernes le gèrent bien, même lorsqu'ils sont utilisés sur des éléments non-inline.

Exemple : Centrer le texte

Par exemple, supposons que vous ayez le code HTML suivant :

Pour centrer le texte verticalement dans #inner, appliquez vertical-align: middle à #en-tête :
#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}
Notez que dans cet exemple, #inner est un élément de bloc en ligne avec une hauteur fixe.