Comment aligner verticalement du texte dans un élément `` à l'aide de Flexbox sans wrapper ?

Alignement vertical du texte dans Flexbox

Lors de l'utilisation de Flexbox pour aligner verticalement le contenu dans un

élément, vous pourriez rencontrer des difficultés. De nombreux didacticiels en ligne suggèrent d'utiliser un div wrapper pour obtenir cet alignement en attribuant align-items: center aux paramètres flex parents. Cependant, il est possible d'éliminer le besoin d'un élément supplémentaire.

Pour obtenir un alignement vertical sans div wrapper, ajustez align-self: center pour align-items: center. Cette simple modification garantit un alignement efficace :

ul {
  height: 100%;
}

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

N'oubliez pas que align-self s'applique aux éléments flex, qui nécessitent un conteneur flex avec display: flex ou display: inline-flex. Dans ce cas, le symbole

est le conteneur flexible, donc align-items est la propriété appropriée pour l'alignement vertical.

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!