Pourquoi « justify-content : center » ne centre-t-il pas le texte dans un conteneur Flex ?

Texte non centré avec justifier-contenu : centre

Dans un conteneur flexible, la propriété justifier-contenu fléchit les éléments horizontalement, mais il n'a aucun contrôle direct sur le texte contenu dans ces éléments. Lorsque le texte s'enroule dans l'élément, il conserve sa valeur text-align: start par défaut, ce qui entraîne un texte non centré.

Le conteneur flex, les éléments flex et le texte représentent trois niveaux distincts dans la structure HTML. justifier-le contenu affecte les éléments flexibles, pas le texte qu'ils contiennent.

Si l'élément flexible remplit la largeur de son conteneur, il ne peut pas être centré, d'où le texte mal aligné lors de l'habillage.

Pour centrez le texte directement, attribuez text-align: center à l'élément ou au conteneur flexible par héritage.

Exemple

<code class="css">.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.with-align p {
  text-align: center;
}</code>

<code class="html"><div class="box">
  <p>some long text here</p>
</div>

<div class="box with-align">
  <p>some long text here</p>
</div></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!