Centrer éléments CSS, gros débutant !

Bonjour à tous,

Alors voilà, je suis un gros gros débutant en HTML CSS et je suis en train de suivre une formation que j'ai acheté sur UDEMY. seulement voila le formateur nous fait faire un site et nous invite à suivre ce qu'il fait, je trouve que pour apprendre c'est pas terrible, j'ai donc décidé de faire un essai de site pour une proche. seulement voilà j'ai un problème auquel je ne trouve pas de solutions !

J'ai cette parti la "photo" que j'aimerais aligner et centrer afin d'y mettre 3 photo en miniature sur le dessus.. j’espère que vous m'aurais compris ...
https://forum.alsacreations.com/upload/1556113594-75377-capturedaeacran2019-04-24aa15.png
Je n'arrive absolument pas à aligner et centrer ça ..

Voici ma parti en HTML

<section id="resume-prestations">
            <div class="wrapper">
                <ul>
                    <li id="extension">
                        <h4>Extension de cils</h4>
                        <a href="prestations.html">En savoir +</a>
                    </li>
                    <li id="volume">
                        <h4>Volume Russe</h4>
                        <a href="prestations.html">En savoir +</a>
                    </li>
                    <li id="microblading">
                        <h4>Microblading</h4>
                        <a href="prestations.html">En savoir +</a>
                    </li>
                </ul>
            </div>
        </section>

Et voici la parti CSS que je n'arrive absolument pas à faire

/* RESUME PRESTATION */

#resume-prestations ul
{
   
}

#resume-prestations ul li
{
    
}

#resume-prestations h4
{
    text-transform: uppercase;
    margin: 20px 50px 5px    
}

#extension
{
    
}

#volume
{
    
}

#microblading
{
    
}

En espérant que vous pourrez m'aider et m’expliquer

Bonne fin de journée !
Modifié par Janssen (24 Apr 2019 - 16:21)

Tu as globalement 2 façons de mettre des images dans un site ; soit en utilisant un propriété css comme ceci :

.element {
  background-image : url("../chemin/vers/mon/image.png")
}

soit en insérant directement l'image dans le code html :

<img src="chemin/vers/mon/image.png" alt="description" />

Généralement tu veux plutôt utiliser cette deuxième méthode lorsque l'image fait parti du contenu de la page.
Modifié par Depassage (24 Apr 2019 - 16:56)

Merci beaucoup pour ta réponse concernant l'image mais, je me suis surement mal exprimé. Mon problème concerne le centrage des éléments qui sont sur le photo (lien 1er post)
Je n'arrive pas à aligner et centrer ça sur ma page. j'ai utilisé text align center, float left... et impossible je ne trouve pas la bonne solution

Bonjour,

est-ce que tu as consulté l'article sur comment centrer en CSS ? 1er de la liste dans https://www.alsacreations.com/tuto/top/ et non sans raison

"Si text-align: center; ne fonctionne pas, essaie margin: 0 auto;" (ou margin: auto c'est l'horizontal qui compte)
EDIT : on est en 2019 donc à tester après avoir vérifié que l'élément n'était ni un flex container ni un flex item (surtout) dans les DevTools via le petit cartouche (flex) qu'ajoute Firefox

Sinon rajoute une bordure autour de tes éléments (en variant les couleurs et les styles dashed/dotted), ça aide BEAUCOUP dans l'apprentissage et dans le débogage. "Pourquoi ça dépasse à droite, d'où vient cette scrollbar horizontal, y a une marge au-dessus de mon bloc qui commence par un titre" ? ==> ajouter des bordures (bien plus rapide que de survoler chaque élément dans les DevTools en ayant un oeil sur l'élément en surbrillance dans la page AMHA)

edit2: ce forum n'aime toujours pas l'Unicode
Modifié par Felipe (25 Apr 2019 - 15:52)

bonsoir,

pour center un groupe d’élément tu peut utiliser display sur le parent.

il y a le display:table avec un margin:auto; qui se centrera et ne prendra que la taille de son contenu.

Il y a aussi flex et grid qui te permettra de placer(aligner) les enfants .

Visuellement, c'est assez similaire avec ton morceau de code, mais chacune de ses valeurs fonctionnent différemment et sont complexes pour un débutant.

En affichant des fonds et des bordures aux éléments, tu peut visualiser l'espace qu'ils occupent.

Voici un codepen , pour voir et tester table/flex et grid, ainsi que text-align : https://codepen.io/anon/pen/XQozWN

Les class utilisées pour la démo sont :

.table {
  display:table;
  margin:auto;
}
.flex {
  display:flex;
  justify-content:center;
}
.grid {
  display:grid;
  justify-items:center
}
.text-center {
  text-align:center;
}

Bon apprentissage , n’hésites pas à suivre les liens vers les tutos qui te sont proposés
Modifié par gcyrillus (26 Apr 2019 - 00:25)