CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

[CSS3] Flexbox, centrer un texte dans un menu

Belz3buth
Belz3buth
Niveau 9
20 janvier 2017 à 10:35:22

Bonjour tout le monde ![[sticker:p/1kkr]]

Voilà je fais un un site web pour faire mon CV, et j'ai suivi la méthode de openclassroom durant les vacances pour agencer les item dans la page avec Flexbox.

Mon professeur de dev est malade cette semaine et je ne puis lui demander comment faire. Voici donc le problème : Je cree un menu flex. Or une fois le menu créé et que la liste apparait je n'arrive pas à les centrer par rapport au menu parent. voici mon html :
<html>
<head> <link rel="stylesheet" href="style.css">
<meta charset="utf-8"> </head>
<body>
<nav>
<ul id="parent">
<li><a href="#">Formation</a>
<ul>
<li><a href="#">bts 1er année</a></li>
<li><a href="#">bac sti</a></li>
</ul>
</li>
<li><a href="#">experience pro</a>
<ul>
<li><a href="#">stage 1</a></li>
<li><a href="#">stage 2</a></li>
</ul>
</li>
<li><a href="#">projet réalisé</a>
<ul>
<li><a href="#">blog</a></li>
<li><a href="#">sport</a></li>
<li><a href="#">cv</a></li>
<li><a href="#">aoc</a></li>
</ul>
</li>
<li><a href="#">Loisirs</a>
<ul>
<li><a href="#">project realise</a></li>
<li><a href="#">project realise</a></li>
<li><a href="#">project realise</a></li>
</ul>
</li>
</ul>
</nav>
<div id="page_centre">
<div id="twfb">
<div class="element"> <img src="twitter.jpg" alt="fb"> </div>
<div class="element"> <img src="t%C3%A9l%C3%A9charger.png" alt="twitter"> </div>
</div>
</div>
</body>
</html>

et mon css :
body {
width: 100%;
margin: 0px;}
nav {
height: 70px;}
#parent {
display: flex;
flex-direction: row;
/* horizontalement */
flex-wrap: wrap;
/* se remet à la ligne lorsque plus de place */
justify-content: space-around;
/* prend de l'espace entre chaque block */}
li {
list-style-type: none;}
ul li ul {
display: flex;
justify-content: center;
margin: 0;
padding: 0;
display: none; /* pour pas qu'il s'affiche */
}
ul li:hover ul {
display: flex;
position: absolute;}
#twfb {
display: flex;
flex-direction: row;
justify-content: center;
}
#page_centre {
background-color: gray;
}

Si c'est pas très beau, faites un petit coup de beautify, avec la balise spoil de jvc j'ai du enlever pas mal d'espace.

Merci :=)[[sticker:p/1kku]]

Message édité le 20 janvier 2017 à 10:38:29 par Belz3buth
Sous forums
  • Aide à l'achat Mac
  • Création de Jeux
  • Linux
  • Programmation
  • Création de sites web
  • Internet
  • Steam Deck
  • Macintosh
  • Hardware
La vidéo du moment