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
Patricia Arquetteoriginal
2024-12-17 22:37:10978parcourir

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 */
}

Par exemple :

<div>vertically centered text</div>

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!

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