Comment aligner verticalement du texte dans un div ?-tutoriel CSS-php.cn

How to Vertically Align Text Within a Div?

Alignement vertical du texte dans un

Dans le développement Web, il est souvent nécessaire d'aligner le texte verticalement dans un

div> élément. Pour y parvenir, plusieurs solutions sont disponibles.

Utilisation de Line-Height :

Une méthode simple consiste à utiliser la propriété line-height. En définissant la hauteur de la ligne sur la même valeur que la hauteur du

, le texte s'alignera automatiquement verticalement au centre.

Exemple :

#abc {
  line-height: 50px;
}

Copier après la connexion

Remarque : Cette méthode ne fonctionne que s'il y a une seule ligne de texte dans le

Utilisation de Display : Table et Display : Table-Cell :

Pour plusieurs lignes de texte, une solution plus polyvalente consiste à utiliser display : table et affichage : propriétés de cellule de tableau. Cette méthode consiste à envelopper le texte dans un et réglage de l'affichage : table-cell et vertical-align : middle.

Exemple :

#abc {
  display: table;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

Copier après la connexion

Utilisation de la propriété Transform :

Une autre alternative consiste à utiliser la propriété transform avec la fonction translateY(). Cela implique de définir la position de l'élément sur absolue, de le positionner à 50 % du haut et de le déplacer de son axe avec -50%.

Exemple :

#abc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Copier après la connexion

Remarque : Cette méthode peut ne pas être prise en charge par les anciens navigateurs tels que IE8.

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

Article précédent：Comment centrer un DIV horizontalement et verticalement sans couper le contenu ? Article suivant：Devriez-vous éviter le sélecteur CSS Star pour de meilleures performances et une meilleure maintenabilité ?

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