Comment fonctionne réellement l’alignement vertical en CSS ?

Alignement vertical en CSS : comprendre les nuances

La propriété vertical-align vous permet de positionner un élément en ligne verticalement au sein de son élément parent. Cependant, son comportement peut être imprévisible à moins que vous n'en compreniez les principes sous-jacents.

Éléments en ligne et hauteur

L'alignement vertical n'affecte que les éléments en ligne. Des éléments tels que

et <div> sont au niveau du bloc et ne sont pas affectés. Pour les éléments en ligne sans hauteur de ligne inhérente, tels que et , vous devez en définir un explicitement à l'aide de la propriété line-height.

Hauteur et alignement vertical

La hauteur de l'élément parent doit avoir une valeur statique (c'est-à-dire pas automatique ni pourcentage). Si la hauteur n'est pas spécifiée, le navigateur la calculera en fonction du contenu, ce qui peut conduire à des résultats inattendus.

Positionnement des éléments en ligne

Contrairement à text-align , qui s'applique à l'élément contenant au niveau du bloc, l'alignement vertical doit être appliqué à l'élément en ligne que vous souhaitez position.

Différences de navigateur

Les navigateurs plus anciens peuvent ne pas prendre en charge l'alignement vertical de manière cohérente. Cependant, les navigateurs modernes le gèrent bien, même lorsqu'ils sont utilisés sur des éléments non en ligne.

Exemple : Centrer le texte

Par exemple, supposons que vous ayez le code HTML suivant :

<div>

Pour centrer le texte verticalement dans #inner, appliquez vertical-align: middle à #header :

#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}

Notez que dans cet exemple, #inner est un élément de bloc en ligne avec une hauteur fixe.

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!