18008 sujets

Questions générales et questions de débutants

Centrer ul li css

Salut tout le monde,
Je suis nouveau sur le forum et dans le html/css aussi, j'ai fait un petit projet en étant aider pour une première page html/css, et j'essaie de faire la suite en autonomie. Je souhaiterais mettre les logos des réseaux sociaux au centre de ma page, mais j'ai beaux essayer de mettre des margin, padding je n'y parvient pas, j'ai encore un peu de mal avec la box css Smiley ohwell .

            <section id="reseaux">
                <h3> Rejoignez-nous sur nos réseaux! </h3>
                    <ul>
                        <a href="https://www.instagram.com/rsophie_menuiserie/?hl=fr"><li id="instagram"></li></a>
                        <li id="facebook"></li>
                        <li id="tweeter"></li>
                    </ul>
            
            </section> 


/* RESEAUX */

#reseaux
{
    background-color: burlywood;
    height: 100px;
    padding: 50px 50px;
}
#reseaux h3
{
    width: 750px;
    border-bottom: 2px solid #ff7a10;
    text-transform: uppercase;
    text-align:center;
    margin: -20px auto 20px auto;
}

#reseaux ul li
{
    width: 300px;
    float: left;
    padding-top: 140px;
    text-align: center;
    margin-right: 10px;
    
    
}
#instagram
{
    background: url('Images/1200px-Instagram_logo_2016.svg.png') no-repeat top center ;
    background-size: 80px;    
}
#facebook
{
    background: url('Images/fb_icon_325x325.png') no-repeat top center;
    background-size: 80px;
}
#tweeter
{
    background: url('Images/Twitter_Bird.svg.png') no-repeat top center;
    background-size: 80px;
}



Je sais pas trop comment ça marche pour introduire des codes html/css sur le forum alors j'espère que je m'y suis prit correctement Smiley biggrin
Coucou Adrien_K, inspire toi de ça.


<section class="reseaux">
  <h3> Rejoignez-nous sur nos réseaux! </h3>
  <ul>
    <li class="instagram">Instragm</li>
    <li class="facebook">Facebook</li>
    <li class="tweeter">Tweeter</li>
  </ul>
</section> 



section {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

li {
  list-style: none;
}

Modifié par vzytoi (30 Apr 2020 - 22:04)
Salut vzytoi, merci pour ta réponse !

Je ne sais pas trop ce que je dois remplacer du coup, j'ai essayé ce que tu m'as donné dans ton lien, mais ils sont centrés les uns au dessus des autres, c'est pour ça que j'avais mis {float: left}, tu as remplacé la <section> par une <div> c'est quoi la différence entre les deux finalement ?

Je connaissais pas la plateforme de ton lien, alors je l'ai utilisé pour que tu vois mon problème (on va espérer que le lien fonctionne...), j'imagine que ça doit être tout bête pour tout centrer
https://codepen.io/Adrien_K/pen/bGVoqOj


(aucune modification à part la source des images, le tweeter est pas a la bonne taille a cause de la source, justement, mais dans mes fichiers il est ok)

Tu verras qu'on a l'impression que tout est collé à gauche, et si j'utilise padding et margin, il y a que l'espacement entre les images qui change.

Voilà si tu as une solution a me proposer... Smiley biggrin
Sujet clos
Aller à