recherche

Maison >interface Web >tutoriel CSS >Comment aligner verticalement du texte dans un div ?

Comment aligner verticalement du texte dans un div ?

DDD
DDDoriginal
2024-12-19 00:41:10733parcourir

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;
}

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;
}

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%);
}

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!

if for using Property function this display position transform table
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
Article précédent：Comment centrer un DIV horizontalement et verticalement sans couper le contenu ?Article suivant：Comment centrer un DIV horizontalement et verticalement sans couper le contenu ?

Articles Liés

Voir plus