Comment centrer le texte verticalement dans un div ?

Comment aligner verticalement le texte dans un div

Lorsque vous travaillez avec un div, il est parfois nécessaire de s'assurer que le texte qu'il contient est aligné verticalement au milieu. Ceci peut être réalisé par différentes méthodes.

Utilisation de la hauteur de ligne

Si le div a une hauteur fixe, telle que 50px, vous pouvez simplement utiliser la hauteur de ligne Propriété CSS.

#abc {
  height: 50px;
  line-height: 50px;
}

Cela centrera le texte verticalement dans le div.

Utilisation des propriétés d'affichage

Pour le texte multiligne, vous pouvez l'envelopper dans un élément span et appliquer les propriétés d'affichage et l'aligner verticalement.

#abc {
  display: table;
  width: 100%;
}

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

Utilisation de la propriété transform

Une autre méthode consiste à utiliser la propriété transform avec le Fonction TranslateY(). Ceci est particulièrement utile pour les navigateurs plus anciens qui ne prennent pas en charge les propriétés d'affichage.

#abc {
  position: relative;
}

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

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!