0
J'essaie de centraliser ma barre de navigation, j'ai essayé le centre d'alignement de texte, et la marge automatique, mais il reste fixe à gauche. J'ai aussi essayé d'ajouter une largeur, mais ça reste fixe. Merci d'avance pour votre aide. S'il vous plaît consulter le JSFIDDLE. Le code HTML est la suivante:Comment faire de la barre de navigation rester au milieu
<section class="contain">
<div id="section-nav" class="section-nav">
<div class="top">
<ul>
<li class="logo"><a href="#">Magna Contra</a></li>
<li class="active"><a href="#">Festival: Paris</a></li>
<li><a href="#">Festival: Paris</a></li>
<li><a href="#">Festival: Paris</a></li>
<li><a href="#">Festival: Paris</a></li>
</ul>
</div>
</section>
Et le CSS:
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
padding:15px;
text-align: center;
margin: auto 0;
}
li a{
text-decoration: none;
color:#bbbbbb;
font-family: "proxima-nova",sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 0.78em;
letter-spacing: .2em}
li a:hover{
color:white;
}
.logo a{
color:#bbb;
font-size: 0.78em;
text-decoration: none;
text-transform: uppercase;
}
.logo a:hover{
color:white;
}
.active a{
color:white;
}
.container {
display: table;
width:980px;
height: 100%;
}
.contain{
display: table;
width: 100%;
text-align: center;
margin: 0 auto;
}
.block {
display: table-row;
height: 1px;
}
.navigation {
display: inline-block;
padding: 10px;
width:100%;
margin: auto;
height: 150px;
}
.top {
background-color: #444;
width:100%;
display: inline-block;
padding: 10px;
text-align: left;
}
.navigation:nth-child(odd) {
background: #222;
}
.push {
height: auto;
}
.container {
margin: 0 auto;
text-align: center;
}
.block:nth-child(odd) {
background: #fff;
}
.search {
border:0px;
background-color:transparent;
color:white;
display: inline-block;
height:28px;
}
.section-nav a{-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none}
.section-nav a.active,.section-nav a:hover{color:#fff;text-decoration:none}