Pourquoi l'alignement vertical ne fonctionne-t-il pas comme prévu avec les éléments de bloc en ligne ?

Problèmes d'alignement vertical avec les éléments de blocs en ligne

L'alignement vertical est généralement attribué au style des éléments en ligne, des blocs en ligne, des images et des tableaux. éléments. Cependant, lorsqu'il est appliqué à des éléments de blocs en ligne, l'alignement vertical ne parvient souvent pas à produire le résultat souhaité. Pour comprendre pourquoi, nous devons nous plonger dans les mécanismes de l'alignement vertical.

L'alignement vertical affecte le positionnement du contenu dans une zone de ligne par rapport à son élément parent. Une zone de ligne fait référence à la zone rectangulaire qui englobe tous les éléments de niveau en ligne sur une seule ligne. Dans notre exemple :

#wrapper {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}

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

L'élément de bloc en ligne '#content' a à la fois une largeur et une hauteur, créant sa propre zone de ligne. L'alignement vertical fonctionne dans cette zone de ligne, en alignant l'élément verticalement à l'intérieur de celle-ci, et non avec son élément parent '#wrapper'.

Par conséquent, lorsque l'alignement vertical est appliqué à un élément de bloc en ligne, il aligne l'élément avec par rapport à sa propre zone de ligne, ce qui entraîne un manque perçu d'alignement vertical au sein de l'élément parent.

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!