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

364 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 articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2927

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

3119

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2548

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...