0

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

4 回答 4

3

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

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

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

于 2013-06-08T02:58:43.643 回答
2

你的 div “section-nav” 没有关闭。我会先解决这个问题。

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

于 2013-06-08T02:26:07.727 回答
1

在给定的小提琴中，你有

.top {

  text-align: left;

}

将其更改为

.top {
   text-align: center
}

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

于 2013-06-08T02:31:26.913 回答
0

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

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

于 2013-06-08T02:24:50.157 回答