Pourquoi l'alignement vertical ne fonctionne-t-il pas sur les éléments de blocs en ligne sur plusieurs lignes ?

L'alignement vertical n'aligne pas les éléments du bloc en ligne : dévoiler la raison cachée

L'alignement vertical est souvent utilisé pour positionner les éléments horizontalement dans leur bloc conteneur . Cependant, il est important de noter que l'alignement vertical s'applique uniquement aux éléments en ligne et aux blocs en ligne, ainsi qu'aux images et aux éléments de tableau. De plus, il doit être appliqué à l'élément enfant, et non à l'élément parent, contrairement à text-alignment.

Malgré cette compréhension, certains utilisateurs peuvent rencontrer des situations où la définition de vertical-align: middle sur un élément inline-block ne pas atteindre le résultat souhaité. En effet, l'alignement vertical aligne le contenu de niveau en ligne dans sa zone de ligne, et non dans le bloc conteneur.

Une zone de ligne est la zone rectangulaire contenant les zones générées par les éléments de niveau en ligne. Lorsque le texte s'enroule sur plusieurs lignes, chaque ligne forme sa propre zone de ligne. Ainsi, par exemple, l'application d'un alignement vertical à une seule ligne de texte n'affectera que sa position verticale dans cette zone de ligne, et non sa position globale dans l'élément parent.

Pour obtenir l'alignement vertical des éléments de bloc en ligne sur plusieurs lignes, envisagez d'utiliser d'autres techniques telles que flexbox, CSS Grid ou des valeurs de hauteur explicites pour 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!