Pourquoi utiliser « align-items : center » au lieu de « align-self : center » pour l'alignement vertical du texte dans Flexbox ?

Alignement vertical du texte dans une Flexbox

Lorsque vous essayez d'aligner le texte verticalement dans une flexbox, l'utilisation de align-self: center peut ne pas produire le résultat souhaité. Au lieu de cela, il est conseillé d'utiliser align-items: center pour obtenir un alignement vertical efficace.

ul {
  height: 100%;
}

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

L'utilisation d'align-items: center affecte directement les conteneurs flexibles, alors que align-self: center est applicable aux éléments flexibles. Puisque li établit un conteneur flexible dans ce cas, align-items: center aligne correctement les éléments enfants verticalement.

<ul>
  <li>This is the text</li>
</ul>

En résumé, pour l'alignement vertical du texte dans une flexbox, align-items: center doit remplacer align- soi : centre. Cela garantit que le conteneur flexible parent positionne correctement ses éléments enfants verticalement, ce qui entraîne l'effet d'alignement souhaité.

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!