javascript - HTML5 <nav> 居中

Question

我有点想做一个网站，但我绝对无法将我的 <nav> 居中标签。我已经阅读了大量的线程，其中包含涉及放入 CSS margin: 0 auto; 的建议。或类似 text-align: center 的东西但似乎没有任何效果。

我的 CSS 放在一个单独的文件中，因此，由于我的 CSS 根本不起作用，所以我只将 HTML 放在这里:

<nav>
    <ul class="nav nav-pills">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="jobs.html">Jobs</a></li>
        <li><a href="contactus.html">Contact us</a></li>
    </ul>
</nav>

如您所见，我正在使用 Bootstrap，我只想将它居中。

Answer 1

有很多方法，但这是最简单的。 三为此需要做的事情:

• display: block;
• width - 一些数量，可以是百分比
• margin: auto; - 顶部/底部可以是任何东西

另请注意 <nav>在浏览器中默认为 block 级元素，因此除非在 IE 8 或更低版本中，否则不需要第一行。

看下面的例子

nav {
  display: block;
  width: 150px;
  margin: 0 auto;
}

<nav>
  <ul class="nav nav-pills">
    <li class="active"><a href="index.html">Home</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
    <li><a href="jobs.html">Jobs</a>
    </li>
    <li><a href="contactus.html">Contact us</a>
    </li>
  </ul>
</nav>