Comment aligner verticalement du texte dans un conteneur Flexbox sans wrapper ?

Alignement vertical du texte dans les conteneurs Flexbox

L'alignement vertical du contenu dans une mise en page Flexbox peut être difficile. Voici comment y parvenir sans recourir à un élément wrapper supplémentaire.

Dans votre exemple, le problème réside dans l'utilisation de align-self: center sur le

élément. Utilisez plutôt align-items: center sur le parent

élément. Cela alignera les éléments enfants de
• verticalement dans le conteneur flexbox.

  Voici le code mis à jour :

  ul {
    height: 100%;
  }
  
  li {
    display: flex;
    justify-content: center;
    align-items: center;  /* Updated this line */
    background: silver;
    width: 100%;
    height: 20%;
  }

  Explication :

  • align-self s'applique aux éléments flexibles individuels et contrôle leur alignement. Cependant, dans votre cas, le
  • n'est pas un élément flexible car son parent,
    , n'a pas display: flex appliqué.
    • align-items contrôle l'alignement des éléments flexibles dans leur conteneur flexible. Depuis le
    • est un conteneur flexible, align-items: center centre efficacement verticalement les éléments à l'intérieur du
    • .
    • Supprimer align-self: center du
    • est crucial, car cela remplacerait l'alignement vertical spécifié par align-items.

    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!