Comment centrer verticalement un Span dans une Div en CSS ?

Comment centrer verticalement un span dans un div

L'alignement vertical peut être déroutant en CSS, et aligner un span dans un div n'est pas exception.

Comprendre l'alignement CSS

Avant de plonger dans les solutions, il est crucial de comprendre l'alignement vertical en CSS :

• Naturel Alignement : Les éléments en ligne (comme le span) sont naturellement alignés sur la ligne de base, qui est le bas du caractère le plus bas.
• Hauteur de la ligne : La ligne La propriété -height définit la hauteur d'une zone de ligne, qui contient à la fois le caractère et tout espace de début.
• Hauteur intrinsèque : La hauteur intrinsèque d'un élément est l'espace qu'il occupe sans aucun espace. style ou rembourrage.

Techniques d'alignement vertical

Pour centrer une travée verticalement dans un div, considérez ces techniques :

1. Faire correspondre la hauteur de la ligne à la hauteur du conteneur :

Définissez la hauteur de la ligne de la travée pour qu'elle corresponde à la hauteur du div. Par exemple, si le div mesure 15 px de haut, définissez line-height : 15px ; sur la travée.

2. Positionnement absolu :

Définir la position : absolue ; sur le div et la position : absolue ; haut : 50 % ; sur la travée. Ajustez ensuite la valeur de la marge supérieure de la travée à la moitié de sa hauteur intrinsèque.

3. Transform : translateY

Utilisez la transformation : translateY(-50%); propriété sur la travée. Cela décale verticalement la travée de la moitié de sa hauteur intrinsèque.

4. Flexbox

Utilisez Flexbox pour centrer verticalement la travée. Définir l'affichage : flex ; aligner les éléments : centre ; sur le div et la marge : auto ; sur la travée.

Échantillon de code

Voici un exemple utilisant la méthode de hauteur de ligne :

<div id="theMainDiv" style="height: 15px; line-height: 15px;">
  <span id="tag1_outer">as</span>
</div>

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!