Pourquoi les éléments de bloc en ligne centraux ne sont-ils pas alignés verticalement dans leurs conteneurs ?

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 Vertical-Align

Contrairement à text-align, qui ajuste l'alignement du texte dans la zone de contenu de son élément parent, vertical-align 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 inline 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;
}

<div>

Problème :

Dans cet exemple, la définition de vertical-align: middle ne centre pas verticalement l'élément #content dans le div #wrapper.

Explication :

Vertical-align n'aligne pas l'élément inline-block 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!