如何使导航栏停留在中间

Question

I'm trying to centralize my nav bar, I've tried text align center, and margin auto, but it stays fixed to the left. I also tried to add a width, but still it stays fixed. Thanks in advance for your help. Please check out the JSFIDDLE . The HTML is as follows:

   <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>

And the 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}

Answer 1

Your div "section-nav" is not closed. I would fix this first.

You have also applied text-align:left to your .top div, which is the main container for the navigation buttons.

Answer 2

The easiest option is to add text-align: center to the ul :

ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    text-align: center;
}

I would also set the li s to display: inline-block to give you more control over their styling.

Answer 3

In the given fiddle you have

.top {

  text-align: left;

}

change it to

.top {
   text-align: center
}

fidd -> http://jsfiddle.net/ztyUF/2/ Is this what u ve asked?

Answer 4

I used this when I had the same problem and have pretty much duplicated it for multiple sites. He explains it much better than I can.

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support