Comment puis-je centrer verticalement du texte dans une division ?

Alignement vertical du texte dans un div

L'incapacité de centrer verticalement le texte dans un div peut poser un défi pour créer des mises en page esthétiquement agréables. Le scénario problématique et la solution suivants résolvent ce problème.

Scénario :

Le HTML et le CSS fournis ne parviennent pas à centrer verticalement le texte dans le div « column-content », malgré les tentatives d'utilisation de margin-top et d'alignement vertical propriétés.

Solution :

L'observation astucieuse d'Andres Ilich fournit la clé pour résoudre ce problème. En fonction de la quantité de texte et de la présence ou non d'autres éléments au sein du div, différentes approches peuvent être nécessaires :

Une seule ligne de texte :

Si le div ne contient qu'une seule ligne de texte, le CSS suivant peut être appliqué :

div {
  height: 200px;
  line-height: 200px; /* Define this property to center the text vertically */
}

Plusieurs lignes de texte ou autre Éléments :

Si le div contient plusieurs lignes de texte ou d'autres éléments, une approche plus complète peut être nécessaire. Une option consiste à utiliser CSS Flexbox ou Grid, qui offrent un meilleur contrôle sur la mise en page et l'alignement.

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!