如何使導航欄停留在中間

Question

我正在嘗試將導航欄居中，我嘗試了將文本居中對齊，並自動設置了邊距，但是它保持固定在左側。 我也嘗試添加寬度，但是仍然保持不變。 在此先感謝您的幫助。 請簽出JSFIDDLE 。 HTML如下：

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

和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

您的div“ section-nav”未關閉。 我先解決這個問題。

您還對.top div應用了text-align：left，這是導航按鈕的主要容器。

Answer 2

最簡單的選擇是在ul上添加text-align: center ：

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

我還要將li設置為display: inline-block以使您可以更好地控制其樣式。

Answer 3

在給定的小提琴中

.top {

  text-align: left;

}

更改為

.top {
   text-align: center
}

fidd-> http://jsfiddle.net/ztyUF/2/這是您要問的嗎？

Answer 4

當我遇到相同的問題並且在多個站點上都重復了很多內容時，就使用了它。 他解釋得比我好得多。

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