Comment puis-je aligner verticalement les éléments en ligne et en bloc en ligne en CSS ?

Alignement vertical des éléments en ligne et des blocs en ligne dans CSS : résoudre les problèmes de mauvais alignement

Alignement vertical des éléments en ligne et des blocs en ligne dans un conteneur div peut poser un défi. Comme le souligne l'exemple fourni, où un élément span semble être poussé vers le bas, la manipulation de la propriété vertical-align uniquement sur le div parent (div) ne donne pas le résultat souhaité.

Cause du désalignement. :

La propriété vertical-align affecte l'alignement des éléments alignés verticalement, pas leur élément parent. Par conséquent, définir vertical-align:middle; ou vertical-align:top; sur le div n'affecte que son propre alignement et non les éléments qu'il contient.

Solution :

Pour aligner verticalement les éléments enfants du div, appliquez l'alignement vertical leur propriété directement :

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

Avec cet ajustement, chaque élément enfant du div sera désormais aligné verticalement au milieu du line.

Remarque supplémentaire :

N'oubliez pas que l'alignement vertical concerne la ligne de texte actuelle, et non toute la hauteur du div parent. Si un centrage vertical est souhaité sur toute la hauteur du div parent, définissez la propriété line-height du div plutôt que sa hauteur. Reportez-vous au lien JsFiddle fourni pour un exemple illustratif.

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!