Pourquoi l'alignement vertical ne fonctionne-t-il pas pour les éléments de bloc en ligne ?

Alignement vertical en HTML : comprendre ses limites

L'alignement vertical, un outil précieux pour aligner verticalement des éléments, est limité à des éléments HTML spécifiques : en ligne, blocs en ligne, images et tableaux. Contrairement à text-align, l'alignement vertical doit être appliqué à l'élément enfant, pas à l'élément parent.

Malgré ces directives, certains développeurs rencontrent des difficultés lorsqu'ils tentent d'appliquer vertical-align:middle aux éléments inline-block. Pour comprendre pourquoi, nous devons nous plonger dans le concept des zones de ligne.

Boîtes de ligne et alignement vertical

L'alignement vertical n'aligne pas les éléments dans leur bloc conteneur mais dans leurs boîtes de ligne. Une zone de ligne est la zone rectangulaire englobant le contenu en ligne d'un élément.

Par exemple, chaque ligne de texte dans un paragraphe multiligne constitue une zone de ligne. C'est pourquoi l'alignement vertical fonctionne parfaitement pour le contenu en ligne tel que

balises.

Exemple :

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }

html, body { height: 100%; }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

Dans cet exemple, chaque ligne de texte est alignée verticalement dans sa zone de ligne, grâce à la ligne- hauteur.

Conclusion

Les éléments de bloc en ligne, positionnés horizontalement dans leur bloc conteneur, n'ont pas les capacités d'alignement vertical du contenu en ligne. Pour obtenir un alignement vertical, il faut soit recourir à des méthodes alternatives, soit envisager de convertir les blocs en ligne en éléments de niveau bloc.

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!