Comment aligner verticalement des éléments en ligne/blocs en ligne dans une division ?

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

Lorsque vous essayez d'aligner verticalement des éléments en ligne ou en bloc en ligne dans un div, il est Il est essentiel de noter que la propriété vertical-align concerne les éléments enfants, et non le parent. Dans le HTML et le CSS fournis, la durée se déplace obstinément vers le bas en raison de l'alignement vertical appliqué à l'élément div.

Pour aligner correctement les éléments verticalement, appliquez la propriété vertical-align aux éléments enfants dans le div. :

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

Cette modification garantira que tous les éléments en ligne et en ligne-bloc au sein du div s'alignent verticalement comme prévu : [https://jsfiddle.net/dfmx123/TFPx8/1186/](https://jsfiddle.net/dfmx123/TFPx8/1186/)

Remarque supplémentaire :

L'alignement vertical est relatif à la ligne de texte actuelle, pas à la hauteur du div parent. Pour obtenir un centrage vertical dans un div plus grand que les éléments alignés, définissez la propriété line-height du div au lieu de sa hauteur. Reportez-vous à l'exemple JSFiddle fourni mis à jour pour une démonstration.

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!