html - 中心导航元素 Bootstrap

Question

我知道以前有人在这里问过类似的问题，但是以前的答案并没有解决我的问题。我需要将导航栏元素居中放置在我的页面上。我试过 text-align: center on the div, nav and a tags，但没有成功。我还需要它具有响应性，以便在调整页面大小时导航栏保持居中。

       <div>
            <nav class="navbar navbar-default">

              <a class="blog-nav-item" href="">item</a>
              <a class="blog-nav-item" href="">item</a>
              <a class="blog-nav-item" href="">item</a>
              <a class="blog-nav-item" href="/">item</a>
              <a class="blog-nav-item" href="/">item</a>
              <a class="blog-nav-item" href="/">item</a>
              <a class="blog-nav-item" href="/">item</a>
              <a class="blog-nav-item" href="/">item</a>
              <a class="blog-nav-item" href="/">item</a>
            </nav>
        </div>

更新:当我将包含导航栏的 div 放入我的 container-fluid 并将其更改为常规容器时，它稍微居中一些，但看起来文本仍然没有在 div 中居中。如果可以的话，我也想保持容器液体。

Answer 1

不同的浏览器根据自己的一套规则呈现 HTML 元素。这就是为什么你要确保告诉浏览器不要对你无政府主义。

您可能遇到的主要问题是文本对齐功能的规则。它不适用于行内元素，但适用于行内 block 元素。

查看此 Fiddle 并在您的浏览器中试用。 http://jsfiddle.net/39ppmgdf/

注意 display:inline-block;

你在这里遇到一些困难的原因是因为 anchor 。

阅读这篇文章的答案以了解更多信息:

What is HTML's <a></a> tag default display type?