Comment aligner verticalement du texte dans un 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!