Maison > interface Web > tutoriel CSS > Comment puis-je centrer verticalement le texte dans une division en CSS ?

Comment puis-je centrer verticalement le texte dans une division en CSS ?

Patricia Arquette
Libérer: 2024-12-17 22:37:10
original
975 Les gens l'ont consulté

How Can I Vertically Center Text Within a Div in CSS?

Alignement vertical du texte dans un div

En CSS, il peut être difficile d'aligner verticalement le texte dans un div, en particulier lorsque plusieurs éléments sont présents dans la division. Voici une solution pour centrer verticalement du texte au sein d'un conteneur, quel que soit le nombre de lignes ou la présence d'images.

Solution :

En définissant la hauteur du div et en utilisant la propriété line-height, vous pouvez vous assurer que le texte est verticalement aligné.

Code :

div {
  height: 200px;
  line-height: 200px; /* Define this value to align the text vertically */
}
Copier après la connexion

Par exemple :

<div>vertically centered text</div>
Copier après la connexion

Notes supplémentaires :

  • Cette méthode fonctionne pour le texte sur une seule ligne.
  • Pour aligner le texte sur plusieurs lignes, utilisez un style supplémentaire ou envisagez d'utiliser une disposition flexbox ou une grille.
  • Si des images ou d'autres éléments sont présents dans le div, vous devrez peut-être ajuster la valeur de la hauteur de ligne ou utiliser des techniques CSS plus avancées pour garantir un alignement correct.

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!

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal