Comment puis-je aligner verticalement des éléments en ligne/blocs en ligne en CSS ?

Alignement vertical des éléments en ligne/blocs en ligne dans CSS

Comprendre l'alignement vertical en CSS peut être crucial lors de la création de mises en page alignées verticalement. Malgré l'application des propriétés d'alignement vertical appropriées, les éléments peuvent persister à se déplacer de manière imprévisible.

Prenons l'exemple fourni :

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>

Ici, l'élément span reste poussé vers le bas malgré l'application des deux propriétés d'alignement vertical. :milieu;" et "vertical-align:top;".

La clé pour résoudre ce problème réside dans la compréhension que "vertical-align" s'applique aux éléments alignés, et non à leurs conteneurs parents. Pour aligner verticalement les enfants de l'élément "div", utilisez la règle CSS :

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

Avec ce changement, les enfants de l'élément "div" s'aligneront verticalement au sein du div parent.

Remarque : "vertical-align" s'aligne par rapport à la ligne de texte actuelle, et non sur toute la hauteur du div du conteneur. Pour centrer les éléments dans un div parent plus grand, définissez la propriété "line-height" du div parent au lieu de sa hauteur. Pour un exemple pratique, reportez-vous au lien jsfiddle fourni dans la question d'origine.

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!