Comprendre l'alignement vertical pour les éléments de bloc en ligne

Bien que la documentation suggère que l'alignement vertical fonctionne pour les éléments de bloc en ligne, cela peut prêter à confusion lorsque il ne s'aligne pas comme prévu. Pour clarifier, approfondissons le concept.

Portée de l'alignement vertical

Contrairement à l'alignement du texte, qui ajuste l'alignement du texte dans la zone de contenu de son élément parent, l'alignement vertical align fonctionne dans la zone de ligne de l'élément. Une zone de ligne est la zone rectangulaire qui englobe les zones générées par un élément de niveau en ligne sur une seule ligne.

Exemple :

Considérez le code suivant :

#wrapper {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
#content {
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}

Problème :
Dans cet exemple, la définition de vertical-align: middle ne centre pas verticalement l'élément #content dans le #wrapper div.
Explication :
L'alignement vertical n'aligne pas le bloc en ligne élément par rapport à son bloc conteneur mais plutôt dans sa propre boîte de ligne. Étant donné que l'élément #content contient uniquement du texte, qui est déjà centré verticalement en fonction de sa ligne de base vertical-align: par défaut, il n'a aucun effet sur l'alignement final.
Conclusion :
 
Lorsque vous travaillez avec l'alignement vertical pour les éléments de bloc en ligne, il est essentiel de comprendre qu'il aligne le contenu dans la zone de ligne de l'élément, et non dans son bloc conteneur. Gardez cela à l'esprit pour obtenir le positionnement vertical souhaité dans les éléments de votre page.