Comment centrer verticalement du texte dans un élément `` Flexbox ?

Comment aligner verticalement du texte dans une Flexbox à l'aide d'align-items

Lorsque vous utilisez Flexbox pour aligner verticalement du contenu dans une

élément, vous pourriez rencontrer des difficultés si vous essayez d'utiliser align-self: center. Pour résoudre ce problème, envisagez plutôt d'utiliser align-items: center.

Contrairement à align-self, qui s'applique aux éléments flexibles, align-items est applicable aux conteneurs flexibles. Dans ce cas, l'élément li est le conteneur flex, permettant à align-items: center de centrer verticalement ses éléments enfants.

Voici une version mise à jour de votre code avec l'ajustement nécessaire :

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* Remove align-self: center */
  align-items: center; /* Add align-items: center */
  background: silver;
  width: 100%;
  height: 20%;
}

L'utilisation d'align-items: center élimine le besoin d'un div wrapper. Il vous permet d'aligner verticalement le texte dans l'élément li sans introduire d'éléments inutiles dans votre code.

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!