Comment centrer verticalement une étendue dans un div

L'alignement vertical peut être déroutant en CSS, et l'alignement d'une étendue 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 dans CSS :

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

Techniques d'alignement vertical

Pour centrer une étendue 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 ; align-items : centre ; sur le div et la marge : auto ; sur la travée.

Exemple de code

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

  as