Pourquoi « vertical-align: middle » ne centre-t-il pas toujours verticalement le contenu en ligne ?

Conséquences inattendues de l'alignement vertical : contenu mal aligné

Dans le domaine de la conception Web, l'alignement vertical joue un rôle crucial dans le positionnement vertical des éléments . Cependant, il existe des cas où l'alignement prévu ne se produit pas, ce qui entraîne un désalignement du contenu.

Considérez l'exemple suivant :

p {
  background: yellow
}

span {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  background: pink;
}

<p>Hello <span>What in the</span> World?</p>

Dans ce scénario, nous nous attendons à ce que le l'élément span doit être aligné verticalement dans le paragraphe qui l'entoure. Cependant, lors de l'application de vertical-align: middle à la travée, nous rencontrons un résultat inattendu : le paragraphe entier, à l'exclusion du contenu de la travée, devient aligné verticalement.

Pourquoi ce désalignement se produit-il ? Ce n'est pas un bug mais plutôt le comportement attendu de vertical-align. Alignement vertical spécifie l'alignement vertical des éléments, et dans ce cas, l'étendue est centrée dans le paragraphe. L'absence d'alignement sur le contenu du span indique que le navigateur restitue le contenu en fonction de sa hauteur naturelle, qui est inférieure à la hauteur du span lui-même.

Pour supprimer le désalignement, nous pouvons ajuster l'alignement vertical du contenu de la travée en modifiant son alignement vertical :

span {
  position: relative;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);
}

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!