Pourquoi les éléments centraux en ligne/blocs en ligne ne sont-ils pas « alignés verticalement » dans une division ?

Alignement vertical des éléments en ligne/bloc en ligne

Dans le but d'aligner verticalement plusieurs éléments en ligne et en bloc en ligne dans un div, un L'utilisateur rencontre un problème où un élément span reste positionné plus bas que prévu dans le conteneur. Malgré l'application de vertical-align:middle; et vertical-align:top; à l'étendue, l'alignement reste inchangé.

La propriété CSS vertical-align contrôle le positionnement vertical des éléments par rapport à la ligne de base du texte. Cependant, cette propriété s'applique aux éléments alignés et non à leur parent. Pour aligner verticalement les enfants dans le div, l'utilisateur doit plutôt cibler directement les éléments enfants :

div > * {
    vertical-align:middle;  // Align children to middle of line
}

Ce code révisé garantira que tous les éléments enfants du div sont centrés verticalement. Notez que l'alignement vertical aligne les éléments par rapport à la ligne de texte actuelle, et non sur toute la hauteur du div parent. Si l'intention est de créer un div plus grand avec des éléments centrés, la propriété line-height peut être utilisée à la place de height. Pour un exemple fonctionnel, reportez-vous au lien jsfiddle fourni :

[lien jsfiddle]

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!