Html 将导航栏的内容定位到中心

我正在尝试将导航栏中的内容居中。使用了类navbar center，但它不能像您在上面的代码中看到的那样工作

    <div class="container">
       <nav class="navbar navbar-default">
           <div class="container-fluid">
                <ul class="nav navbar-nav navbar-center">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Public</a></li>
                    <li><a href="#">Comercial</a></li>
                    <li><a href="#">Residential</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
           </div><!--end of div-->
       </nav><!--end of navbar-->
    </div><!--  end of div container-->

如果您能提供帮助，我们将不胜感激。

您应该使用

    .navbar{
       text-align: center;
     }

---

您应该将margin:auto添加到.container流体元素中，并指定其宽度。您可能也不希望它在较小的视口上以这种方式运行，因此可以通过媒体查询对其进行更改

---

如果我没看错的话，在这里使用文本对齐不会给你想要的结果。文本对齐将仅使文本在其包含的元素中居中。在你的例子中，a标签。此外，如果你发布了一些CSS，肯定会有助于了解发生了什么。

我使用了以下代码，它工作得非常好。 多谢各位

    .navbar .navbar-nav {
     display: inline-block;
     float: none;
     vertical-align: top;
    }

    .navbar .navbar-collapse {
     text-align: center;
    }

---

在我的CSS中，我有与您发送的相同的代码。它使链接居中，但并非所有链接都在同一条线上。“联系人”链接向下移动了一行。@SidneySousa只需调整（添加）包含元素的宽度，直到所有菜单项都适合一行。

.container-fluid {
  width: 493px;
  padding: 0;
  margin: auto;
}

@media (max-width: 768px) {
  .container-fluid {
    width: 100%;
  }
}

    .navbar .navbar-nav {
     display: inline-block;
     float: none;
     vertical-align: top;
    }

    .navbar .navbar-collapse {
     text-align: center;
    }