Maison >interface Web >tutoriel CSS >Pourquoi « justify-content : center » ne centre-t-il pas le texte dans un conteneur Flex ?

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

Linda Hamilton
Linda Hamiltonoriginal
2024-11-02 02:50:301010parcourir

Why Doesn't `justify-content: center` Center Text in a Flex Container?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn