recherche

Maison >interface Web >tutoriel CSS >Comment centrer verticalement le texte dans un élément Div ?

Comment centrer verticalement le texte dans un élément Div ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-23 18:22:14315parcourir

How to Vertically Center Text within a Div Element?

Alignement vertical en

Éléments

Pour aligner le texte verticalement au milieu d'un

tout en conservant une hauteur d'élément spécifique, plusieurs approches sont disponibles :

Utilisation de la hauteur de ligne

Pour centrer verticalement le texte d'une seule ligne, appliquez une hauteur de ligne égale à la hauteur souhaitée hauteur de l'élément, comme démontré dans le CSS suivant :

#abc {
  line-height: 50px;
}

Utilisation de Display Propriétés

Pour le texte multiligne, enveloppez le texte dans une ligne et appliquer display: table; et affichage : table-cellule ; avec vertical-align: middle; comme suit :

#abc {
  display: table;
  width: 100%;
}

#abc span {
  vertical-align: middle;
  display: table-cell;
}

Utilisation de la propriété Transform

Pour un alignement plus avancé, envisagez d'utiliser la propriété transform avec TranslateY() :

#abc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Remarques importantes :

  • L'alignement basé sur la transformation est limité prise en charge de plusieurs navigateurs.
  • Assurez-vous que l'élément a une position définie, telle que relative ou absolue, pour que le positionnement de la transformation prenne effet.

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!

css for while using Property display position transform table
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment puis-je contrôler les styles CSS en fonction de la taille de l'écran et de l'appareil ?Article suivant：Comment puis-je contrôler les styles CSS en fonction de la taille de l'écran et de l'appareil ?

Articles Liés

Voir plus