web-dev-qa-db-fra.com

Comment aligner verticalement du texte dans une flexbox?

Je voudrais utiliser flex box pour aligner verticalement du contenu dans un <li> mais sans grand succès.

J'ai vérifié en ligne et de nombreux tutoriels utilisent en réalité un div wrapper qui obtient le align-items:center à partir des paramètres de flex du parent, mais je me demande s'il est possible de supprimer cet élément supplémentaire 

J'ai choisi d'utiliser flex box dans cet exemple, car la hauteur de l'élément de la liste sera un% dynamique. 

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}
<ul>
  <li>This is the text</li>
</ul>

htmlcsscss3flexbox
256
styler

Edit: Veuillez utiliser La réponse de Michael_B au lieu de la mienne. Je supprimerais cette réponse si je le pouvais, mais les réponses acceptées ne peuvent pas être supprimées.

Si vous faites le flex-direction vertical (en utilisant column), alors justify-content: center sera centré verticalement. Ensuite, vous pouvez simplement utiliser text-align: center pour centrer horizontalement également.

li {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

Le voici en action: http://codepen.io/anon/pen/Fkhgo

339
Ben Visness

Au lieu d'utiliser align-self: center, utilisez align-items: center.

Il n'est pas nécessaire de changer flex-direction ou d'utiliser text-align (comme suggéré dans une autre réponse ).

Voici votre code, avec un seul ajustement, pour que tout fonctionne:

ul {
  height: 100%;
}

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

La propriété align-self s'applique à éléments flexibles. Sauf que votre li n'est pas un élément flexible parce que son parent - la ul - n'a pas display: flex ou display: inline-flex appliqué.

Par conséquent, la ul n'est pas un conteneur flexible, la li n'est pas un élément flexible et align-self n'a pas d'effet.

La propriété align-items est similaire à align-self, sauf qu'elle s'applique à conteneurs flexibles.

Puisque li est un conteneur flex, align-items peut être utilisé pour centrer verticalement les éléments enfants.

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}
<ul>
  <li>This is the text</li>
</ul>

démo codepen

Techniquement, voici comment align-items et align-self fonctionnent ...

La propriété align-items (sur le conteneur) définit la valeur par défaut de align-self (sur les éléments). Par conséquent, align-items: center signifie que tous les éléments flexibles seront définis sur align-self: center.

Mais vous pouvez remplacer cette valeur par défaut en ajustant le align-self sur des éléments individuels. 

Par exemple, vous pouvez vouloir des colonnes de hauteur égale pour que le conteneur soit défini sur align-items: stretch. Cependant, un élément doit être épinglé en haut, il est donc défini sur align-self: flex-start.

Exemple

Comment le texte est-il un élément flex?

Certaines personnes peuvent se demander comment une série de textes ...

<li>This is the text</li>

est un élément enfant de la li.

La raison en est que le texte qui n'est pas explicitement encapsulé par un élément de niveau en ligne est encapsulé dans un algorithme par un cadre en ligne. Cela en fait un élément en ligne anonyme et un enfant du parent.

De la spécification CSS:

9.2.2.1 Anonyme en ligne des boites

Tout texte directement contenu dans un élément de conteneur de bloc doit être traité comme un élément en ligne anonyme.

La spécification flexbox prévoit un comportement similaire.

4. Éléments Flex

Chaque enfant entrant dans un conteneur flex devient un élément flex, et chaque séquence de texte contigu qui est directement contenue dans un fichier flex Le conteneur est emballé dans un article Flex anonyme.

Par conséquent, le texte dans li est un élément flexible.

308
Michael_B

Pour les futurs Googlers, 

La réponse la plus votée et la deuxième la plus demandée concernent également la résolution de {ce problème spécifique} posté par OP, où le contenu (texte) était "algorithmiquement" encapsulé dans un élément de bloc en ligne. MAIS, votre cas peut concerner environ centrage vertical d’un élément normal à l’intérieur d’un conteneur}, ce qui s’applique également dans mon cas. 

align-self: center;

Il suffit de mettre ceci ici car c’est le résultat final pour la requête susmentionnée et j’étais assez confus depuis un certain temps * Derp *

11
Mohd Abdul Mujib

La meilleure solution consiste simplement à imbriquer une boîte souple dans une boîte souple. Tout ce que vous avez à faire est de donner à l'enfant align-items: center. Cela alignera verticalement le texte à l'intérieur de son parent.

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  align-items: center;
}
5
staypuftman

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  align-items:center;
  background: silver;
  width: 100%;
  height: 20%;
}
<ul>
  <li>This is the text</li>
</ul>

0
Swapnil