Pourquoi l'alignement vertical fonctionne-t-il différemment avec les éléments en ligne ?

Comprendre la propriété Vertical-Align

L'alignement vertical en CSS pose des défis lorsque vous travaillez avec des éléments en ligne en raison de certaines conditions et exceptions.

Application de l'alignement vertical

L'alignement vertical s'applique aux éléments en ligne dans un conteneur en ligne ou en bloc qui a une hauteur spécifiée. Il est recommandé de définir la hauteur sur une valeur statique (et non automatique ou %).

Positionnement dans les éléments en ligne

Dans les éléments en ligne, l'alignement vertical ajuste l'alignement du le texte ou le contenu de l'élément verticalement. Ceci est différent de text-align, qui aligne le texte horizontalement dans un élément de bloc.

Exemple JSFiddle

Dans le JSFiddle fourni, #header doit être centré verticalement entre # extérieur et #intérieur. Cependant, #header est positionné en haut de #inner. En effet, #inner est un élément en ligne, mais #header ne l'est pas.

Alignement des boîtes de ligne

L'alignement vertical aligne les éléments en fonction de leurs boîtes de ligne. Ces zones sont créées en fonction des lignes individuelles de texte ou de contenu. Par conséquent, s'il y a plusieurs lignes, l'alignement vertical s'alignera sur les zones de ligne respectives, créant un résultat inattendu où l'alignement de l'élément n'est pas cohérent sur toute la hauteur du conteneur.

Considérations supplémentaires

• Les navigateurs modernes gèrent correctement l'alignement vertical pour les éléments qui ne sont pas naturellement des éléments en ligne.
• Vous devrez peut-être envelopper l'élément que vous souhaitez aligner verticalement dans un élément en ligne.
• Envisagez d'ajouter une hauteur de ligne aux éléments qui n'en ont normalement pas.
• Si vous souhaitez centrer un élément verticalement sur toute la hauteur d'un conteneur, vous devrez peut-être recourir à une alternative des méthodes telles que flexbox ou une table.

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!