Issue
I'm trying to center a <ul> list with a <h2> title above it but I can't do it.
I want all elements of .navig to be below each <h2> title.
It seems like it's an issue with the bullet points because I want to remove them.
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>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=BenchNine" rel="stylesheet"/>
</head>
<body>
<!-- En-tête -->
<header>
<h1>Accueil</h1>
<!-- Menu de navigation -->
<div id="menu">
<div>
<h2>Recettes salées</h2>
<ul class="navig">
<li><a href="recettes_salees/omelette.html">Omelette au tofu</a></li>
<li><a href="recettes_salees/feuilletes.html">Feuilletés maison</a></li>
<li><a href="recettes_salees/aubergines.html">Aubergines au four</a></li>
</ul>
</div>
<div>
<h2>Recettes sucrées</h2>
<ul class="navig">
<li><a href="recettes_sucrees/tarte.html">Tarte fraise / chocolat</a></li>
<li><a href="recettes_sucrees/daifuku.html">Daifukus ou mochis</a></li>
</ul>
</div>
<div>
<h2>Lifestyle</h2>
<ul class="navig">
<li><a href="#">Tutos beauté</a></li>
<li><a href="#">Bons plans</a></li>
</ul>
</div>
</div>
</header> JSFiddle : https://jsfiddle.net/dd4s0tqL/
Pic : https://puu.sh/wR3cj/e680f8a7a9.png
Solution
You need to remove padding from ul and give text-align property to li, like below
.navig {
text-align: left;
list-style: none;
padding-left: 0px;
}
.navig li {
text-align: center;
}
Here is a fiddle for you
Edit:
For equal with,you need following changes in current style rules:
#menu{
text-align: center;
display: flex;
}
#menu div{
display: table-cell;
width: 35%;
}
Here is the updated fiddle
Answered By - Talha Abrar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.