Comment la propriété « vertical-align » positionne-t-elle les éléments en ligne ?

Comprendre la propriété Vertical-Align

Lorsque vous travaillez avec des alignements verticaux, il est crucial de comprendre les principes derrière la propriété « vertical-align ». Cette propriété dicte la façon dont un élément en ligne est positionné verticalement par rapport au texte ou aux éléments qui l'entourent.

Exigence relative aux éléments en ligne

La propriété "vertical-align" ne peut être appliquée que pour intégrer des éléments, tels que span, img et a. Les éléments en ligne s'intègrent naturellement dans le flux du texte.

Considérations relatives à la hauteur de ligne

Pour les éléments pour lesquels aucune hauteur de ligne n'est normalement spécifiée, tels que les images ou les icônes, une hauteur de ligne doit être définie pour permettre un alignement vertical correct.

Exigence de valeur de hauteur

La hauteur de l'élément où « alignement vertical » est appliqué doit avoir un valeur statique (pas de pourcentage ou automatique), garantissant un alignement vertical cohérent.

Élément contenant vs élément ciblé

La propriété "alignement vertical" peut être appliquée à à la fois l'élément contenant et l'élément ciblé qu'il devrait affecter. Cependant, il est préférable de l'appliquer à l'élément conteneur car cela affecte tous les éléments en ligne dans ce conteneur.

Comprendre les zones de ligne

La propriété "vertical-align" aligne le centre vertical de l’élément avec la zone de ligne du texte environnant. La zone de ligne englobe une ligne de texte, et non toute la hauteur du conteneur.

Démonstration JsFiddle

L'exemple JsFiddle fourni illustre les principes de l'alignement vertical. Le conteneur externe est défini sur 200 px de hauteur et l'élément interne est défini sur inline-block ainsi que sur 200 px de hauteur. L'en-tête à l'intérieur de l'élément interne est défini sur "vertical-align: middle;".

Le résultat attendu est que l'en-tête soit centré verticalement dans l'élément interne. Cependant, étant donné que l'en-tête contient plusieurs lignes de texte, l'alignement vertical est appliqué aux zones de ligne individuelles, et non à toute la hauteur. En conséquence, l'en-tête n'est que partiellement aligné dans le conteneur.

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!