如何集中引导固定导航栏中的项目？

Question

在下面的代码中，我尝试设置float:none和集中技术将项目推送到导航的中心，但没有任何效果。

如何让项目位于导航栏的中间？

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Answer 1

你可以这样做：

.container-fluid{
  text-align: center;
}
.navbar .navbar-nav {
  display: inline-block;
  float: none;
}

这将使您的导航项目居中。如果您想尝试一下，请在此处查看JS Fiddle。