Liste Centre ul avec un titre h2

J'essaie de centrer une liste ul avec un titre h2 au-dessus, mais je ne peux pas le faire.Liste Centre ul avec un titre h2

Je souhaite que tous les éléments de ".navig" soient en dessous de chaque titre h2.

Il semble que ce soit un problème avec les puces parce que je veux les supprimer.

Toute aide serait appréciée.

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'BenchNine', sans-serif; 
 
    font-size: 120%; 
 
} 
 

 
header{ 
 
    -webkit-box-shadow: 0px 5px 9px 0px rgba(143,143,143,1); 
 
    -moz-box-shadow: 0px 5px 9px 0px rgba(143,143,143,1); 
 
    box-shadow: 0px 5px 9px 0px rgba(143,143,143,1); 
 
} 
 

 
.navig { 
 
    text-align:left; 
 
    list-style: none; 
 
    padding-left: 180px; 
 
} 
 

 
#menu{ 
 
    text-align: center; 
 
    
 
} 
 
#menu div{ 
 
    display: table-cell; 
 
    width: 10%; 
 
} 
 

 
h1, h2, h3, h4, h5{ 
 
    font-family: 'Amatic SC', cursive; 
 
} 
 

 
h1 { 
 
text-align:center; 
 
}

<!DOCTYPE html> 
 
<head> 
 
\t <link rel="stylesheet" href="style.css"> 
 
\t <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"/> 
 
\t <link href="https://fonts.googleapis.com/css?family=BenchNine" rel="stylesheet"/> 
 
</head> 
 
<body> 
 
\t <!-- En-tête --> 
 
\t <header> 
 
    
 
\t \t <h1>Accueil</h1> 
 
\t \t <!-- Menu de navigation --> 
 
\t \t \t <div id="menu"> 
 
\t \t \t \t <div> 
 
\t \t \t \t \t <h2>Recettes salées</h2> 
 
\t \t \t \t \t <ul class="navig"> 
 
\t \t \t \t \t \t <li><a href="recettes_salees/omelette.html">Omelette au tofu</a></li> 
 
\t \t \t \t \t \t <li><a href="recettes_salees/feuilletes.html">Feuilletés maison</a></li> 
 
\t \t \t \t \t \t <li><a href="recettes_salees/aubergines.html">Aubergines au four</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div> 
 
\t \t \t \t \t <h2>Recettes sucrées</h2> 
 
\t \t \t \t \t <ul class="navig"> 
 
\t \t \t \t \t \t <li><a href="recettes_sucrees/tarte.html">Tarte fraise/chocolat</a></li> 
 
\t \t \t \t \t \t <li><a href="recettes_sucrees/daifuku.html">Daifukus ou mochis</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div> 
 
\t \t \t \t \t <h2>Lifestyle</h2> 
 
\t \t \t \t \t <ul class="navig"> 
 
\t \t \t \t \t \t <li><a href="#">Tutos beauté</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Bons plans</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> \t 
 
\t \t \t </div> 
 
\t </header> \t

jsFiddle: https://jsfiddle.net/dd4s0tqL/

Pic: https://puu.sh/wR3cj/e680f8a7a9.png

Source

2017-07-23 Kilian Jacquemin

Vous devez retirer le rembourrage de ul et donner text-align propriété à li, comme ci-dessous

.navig { 
    text-align: left; 
    list-style: none; 
    padding-left: 0px; 
} 

.navig li { 
    text-align: center; 
}

Voici un fiddle pour vous

Edit:

Pour égale, vous avez besoin suite à des changements dans les règles actuelles de style:

#menu{ 
    text-align: center; 
    display: flex; 

} 

#menu div{ 
    display: table-cell; 
    width: 35%; 
}

Voici mise à jour fiddle

Source

2017-07-23 16:28:28

Juste un plus petite chose: Comment puis-je avoir chacun des 3 titres h2 ont la même largeur? C'est-à-dire environ 33% de la largeur de la page? En faisant cela, j'aurai le titre "Recettes sucrées" sous le titre "Accueil" et c'est exactement ce que je veux. –

Liste Centre ul avec un titre h2

Répondre

Questions connexes