html - 中心导航栏 foundation5 框架？

Question

我进行了很多搜索并尝试了多项更改，但我无法让导航栏居中。

<nav class="top-bar" data-topbar>
  <ul class="title-area">
      <li class="name">
                </li>
                  </ul>
                    <section class="top-bar-section">
                         <ul class="center">
                         <li><a href="#">Home</a></li>
                         <li><a href="#">Services</a></li>
                         <li><a href="#">Contact</a></li>
                         <li><a href="#">Client Area</a></li>
                         </ul>
                        </section>
</nav>

CSS 非常大，所以我使用了 Pastebin - http://pastebin.com/raw.php?i=E8WQT41K

无论我怎么尝试，它仍然在左边。

Answer 1

试试这个。你的 css 太长了。只为你的导航部分应用这个 css

.title-area
{
    list-style:none;
    float:left;
}
.top-bar-section
{
    width:300px;
    height:auto;
    margin:0 auto;
}
.center
{
  list-style:none;  
}
.center li
{
  list-style:none;
  display:inline-block;
}

http://jsfiddle.net/XNCj7/2/