J'ai un et ci-dessous est le contenu de initialement Centre a été positionné Center en raison de en-tête comme ci-dessous .progress-bar < Pré> xxx 
Justify-Content: espace entre défini à styledheader , le problème était arrière-plan-couleur: vert ne peut prendre que très peu d'espace, alors je procède pour définir un style CSS, pour Faites-le Flex: 1 Pour prendre autant d'espace que possible, mais je ne pouvais pas la positionner pour être Centre plus?
3 Réponses :
Ajouter texte-align: centre; comme ceci: Si vous avez un autre contenu (par exemple: éléments HTML) que vous souhaitez passer au centre de l'intérieur .progress-bar , alors vous devez Ajouter Affichage: flex; , comme celui-ci:
div élément de div avec classe Progress-Bar code> devrait être un conteneur Flex pour que ses enfants soient affectés par des propriétés de Flexbox .progress-bar {
background-color: green;
flex: 1;
display: flex; <--------
justify-content: center;
align-items: center;
}
Ahh je vois! Je pensais que depuis styledheader est un flexbox et donc tout ce que son composant imbriqué sera traité comme flexbox !
Parce que vous n'avez pas mis de balise pour le texte "Centre". Il suffit de mettre une balise p sur elle, alors cela devrait fonctionner.
Vous avez seulement besoin de texte-alignement: Centre pour la barre de progression