Comment centrer verticalement le texte dans un élément Div ?-tutoriel CSS-php.cn

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

Barbara Streisand

Libérer： 2024-12-23 18:22:14

original

380 Les gens l'ont consulté

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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%);
}

Copier après la connexion

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!

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：Quelle est la différence entre la marge CSS et le remplissage ?

Déclaration de ce site Web

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

Derniers numéros