[Résolu] Je n'arrive pas a centré mes éléments

Bonjour j'ai un souci je ne parvient pas a centré mes éléments au milieux de leurs 'case' dans ma page quelqu'un peut me dire ou me mettre sur la voix de mon erreur s'il vous plait ?

 .news{
     display: flex;
     align-content: center;
     flex-flow: row wrap;
     margin: 20px
}
 div.news h2{
     text-decoration: underline;
     width: 100%;
}
 .element {
     width: 100%;
     height: 50%;
     background-color: #F2C05A;
     border: 4px inset red;
     padding: 20px;
     margin: 20px 0;
}
 div.news .element {
     width: 30%;
     height: 80%;
     padding: 10px;
     margin: 20px 10px 20px 0;
     
}
 .element > p{
     color: black;
}
/*--------------------fin News----------------------*/

pour le CSS

  <div>
        <div class="news">
            <h2>News</h2>
            <div class="element">

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="element">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="element">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>

pour le HTML

Salut,
Si j'ai bien compris ta demande, il suffit d'ajouter "text-align: center;" à ta classe ".element"
Par contre, je te conseille de sortir ton h2 de la div "news".
Il y a pas mal de CSS inutile sur ce que tu as envoyé, le même CSS sert ailleurs pour autre chose?

Bonjours non je voulais juste centrer tout les contenus texte et bordure dans leurs partie . Donc quelqu’un m’a dit donner la réponse il manquait un Margin: auto; sur la class élément (erreur con )

Par contre oui le css sert également ailleurs mais si vous désirer je peut vous envoyé le code complet afin d’obtenir un avis critique.
Étant en formation de développement web tout conseil et bon a prendre

Ok^^
Sinon, au lieu de margin: auto (qui du coup peut te bloquer si tu veux régler finement tes marges), tu peux utiliser les propriétés flexbox qui servent justement à ça...
Dans la classe news, tu peux mettre une de ces valeurs :

justify-content: center; /* centré sans espace entre les éléments */
justify-content: space-between; /* centré avec de l'espace entre les éléments */
justify-content: space-around; /* centré avec de l'espace autour des éléments */

Pour info, la propriété "align-content" que tu as utilisé permet de gérer l'espacement entre les enfants dans la seconde direction
Modifié par Mathieu8337 (27 Nov 2019 - 11:24)