Texte non centré avec justifier-contenu : centre

Dans un conteneur flexible, la propriété justifier-contenu centre 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 flexible ou au conteneur par héritage.

Exemple

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.with-align p {
  text-align: center;
}

  
some long text here



  
some long text here