Question

我知道之前有人问过这个问题，但之前的答案并没有解决我的问题。我需要将导航栏元素集中在我的页面上。我尝试过text-align：在div，nav和标签上居中，但没有运气。我需要它以便响应，因此导航栏会在页面调整大小时保持居中。

       <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保持在容器流体中并将其更改为常规容器时，它会更加集中，但看起来文本仍未在div中居中。如果可以的话，我还想保留容器液。

Answer 1

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

您可能遇到的主要问题是text-align函数的规则。它不适用于内联元素，但适用于内联块元素。

查看此小提琴并在浏览器中试用。 http://jsfiddle.net/39ppmgdf/

注意display:inline-block;

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

阅读本文的回答以了解更多信息：

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

中心导航元素bootstrap

1 个答案: