如何让导航栏居中答案

【问题标题】：How to make nav bar stay in the middle如何让导航栏居中
【发布时间】：2013-06-08 02:20:26
【问题描述】：

我正在尝试集中我的导航栏，我尝试过文本居中对齐和自动边距，但它仍然固定在左侧。我也尝试添加宽度，但它仍然保持固定。在此先感谢您的帮助。请查看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}

【问题讨论】：

标签： html css

【解决方案1】：

最简单的选择是将text-align: center 添加到ul：

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

我还将lis 设置为display: inline-block，以便您更好地控制它们的样式。

【讨论】：

【解决方案2】：

您的 div “section-nav” 未关闭。我会先解决这个问题。

您还为 .top div 应用了 text-align:left，它是导航按钮的主要容器。

【讨论】：

【解决方案3】：

在给定的小提琴中，你有

.top {

  text-align: left;

}

改成

.top {
   text-align: center
}

fidd ->http://jsfiddle.net/ztyUF/2/这是你问的吗？

【讨论】：

【解决方案4】：

当我遇到同样的问题并且几乎为多个站点复制了它时，我使用了它。他解释得比我好得多。

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

【讨论】：