html - 我如何在中心对齐导航栏

Question

如何在页面中心对齐 Bootstrap 导航栏。下面是我的代码，我希望它居中对齐。我尝试了几件事但没有工作。你能帮我解决这个问题吗？

<nav class="navbar header-navbar hidden-xs" role="navigation">
  <ul class="nav navbar-nav">
             <li><a href="index.html" class="active-link">HOME</a></li>
                        <li><a href="products.html">PRODUCTS</a></li>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="contact.html">CONTACT</a></li>
                        <li><div class="cart-area"><a href="cart.html">Cart: 0</a></div></li>
                  </ul>
                </nav>

Answer 1

其他人发布了类似问题的解决方案:link

应该工作:

@media (min-width: 768px){
    .navbar-nav{
        float:none;
        margin: 0 auto;
        display: table;
        table-layout: fixed;
    }
}