Comment fonctionne l'alignement vertical avec la propriété « vertical-align » ?

Alignement vertical avec la propriété vertical-align

Dans le monde de la conception Web, l'alignement vertical joue un rôle crucial dans l'amélioration de l'esthétique visuelle et organiser efficacement le contenu. La propriété CSS vertical-align offre un moyen de positionner verticalement des éléments en ligne dans un élément parent, permettant aux développeurs d'obtenir un alignement précis. Cependant, comprendre ses subtilités peut être une tâche déroutante.

Détermination de l'alignement vertical

Pour comprendre les mécanismes de l'alignement vertical, nous devons d'abord reconnaître qu'il ne s'applique qu'à éléments en ligne. Ces éléments, tels que , ou le texte contenu dans des éléments de niveau bloc, occupent une seule ligne et n'ont pas de hauteur implicite. De plus, il est essentiel de spécifier une hauteur de ligne pour les éléments dépourvus de hauteur inhérente.

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>

CSS :

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

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

#header {
  display: inline-block;
}

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>

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!