La propriété height de l'élément parent doit posséder une valeur statique pour que l'alignement vertical prenne effet. Les valeurs automatiques ou en pourcentage ne suffiront pas. De plus, divers navigateurs modernes rencontrent des difficultés à restituer avec précision l'alignement vertical sur les éléments non en ligne.

Sélection d'éléments pour l'alignement

Une idée fausse courante est que l'alignement vertical est appliqué à l'élément conteneur, semblable à text-align. Cependant, il doit être attribué à l'élément qui nécessite un positionnement vertical. Par exemple, si nous souhaitons centrer un

dans un <div>, la propriété vertical-align doit être appliquée directement au

.

Exemple pratique

Considérez le code HTML et CSS suivant code :

HTML :

<div>

Copier après la connexion

Copier après la connexion

CSS :

#outer {
  height: 200px;
  text-align: center;
}

#inner {
  display: inline-block;
  height: 200px;
  vertical-align: middle;
}

#header {
  display: inline-block;
}

Copier après la connexion

Intuitivement, on pourrait s'attendre à ce que le

élément à centrer verticalement dans le <div> éléments. Cependant, ce n’est pas le cas. Pour comprendre pourquoi, il est essentiel de se rappeler que l'alignement vertical s'effectue ligne par ligne au sein de l'élément parent. Par conséquent, si le contenu du fichier <div> l'élément dépasse une seule ligne, l'élément

ne s'alignera pas comme prévu.

Pour illustrer ce concept, nous pouvons modifier le code HTML :

<div>

Copier après la connexion

Copier après la connexion

Comme vous pouvez le constater, le

L'élément est désormais centré verticalement dans l'élément parent, car l'alignement vertical est basé sur la hauteur de ligne du texte.

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!