Bootstrap导航栏链接不会居中[重复]

Question

一个多星期以来，我一直在尝试将 Bootstrap 导航栏上的链接/选项卡居中，这让我很头疼。在这里解决了所有类似的问题，但绝对没有任何效果。我在想我已经在某个地方加倍了规则，或者实际上并没有针对正确的事情。

这是 Dreamweaver 上的基本 Bootstrap 导航栏 sn-p。我已经设法自定义颜色/字体/大小，但就是不能让该死的东西坐在中间。

.navbar.navbar-default {
  background-color: #B3C5D7;
  background-attachment: fixed;
  position: fixed;
  width: 100%;
  border-radius: 0px;
  float: none;
  text-align: center;
}

.nav.navbar-nav {
  font-size: x-large;
  width: 100%;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <div class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="ourcarefactor.html">OUR CARE FACTOR</a></li>
          <li><a href="facilities.html">FACILITIES</a></li>
          <li><a href="functions.html">FUNCTIONS</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Answer 1

您可以使用 Flexbox：

.navbar {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
}

Answer 2

尝试添加这些类

CSS

.navbar-header
{
  float:none;
}

.navbar-nav li
{
  float:none;
  display:inline-block;
}

希望这会有所帮助..

Answer 3

基本上在navbar-header 和li 中使用float:left 引导，因此父div 不接受中心对齐或自动边距，因此更新包含在以下sn-p 中的css 部分或检查小提琴链接

在第一个选项中，您将获得嵌套类以仔细查看 css 和 html。

1st option with nesting class to get center

在第二个选项中，您将只获得 css 更改，因此请仔细检查 css。

获得中心的第二个选项

2nd option to get center

更新css部分，我使用inline-flex获取中心

.navbar.navbar-default {
  background-color: #B3C5D7;
  background-attachment: fixed;
  position: fixed;
  width: 100%;
  border-radius: 0px;
  float: none;
  text-align: center;
}

.nav.navbar-nav {
  font-size: x-large;
  width: 100%;
  display: inline-block;
}

/* Add this css part */

.navbar-header {
  float: none; /* Add this */
}

.navbar-nav li {
  display: inline-flex;  /* Add this */
  float: none;  /* Add this */
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <div class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="ourcarefactor.html">OUR CARE FACTOR</a></li>
          <li><a href="facilities.html">FACILITIES</a></li>
          <li><a href="functions.html">FUNCTIONS</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

.navbar.navbar-default {
  background-color: #B3C5D7;
  background-attachment: fixed;
  position: fixed;
  width: 100%;
  border-radius: 0px;
  float: none;
  text-align: center;
}

.nav.navbar-nav {
  font-size: x-large;
  width: 100%;
  display: inline-block;
}

/* Add this css part */

.navbar-header.center-items {
  float: none;  /* Add this */
}

.navbar-center.navbar-nav li {
  display: inline-flex;  /* Add this */
  float: none;  /* Add this */
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header center-items"> <!--Add class -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <div class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav navbar-center">  <!--Add class -->
          <li class="active"><a href="index.html">HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="ourcarefactor.html">OUR CARE FACTOR</a></li>
          <li><a href="facilities.html">FACILITIES</a></li>
          <li><a href="functions.html">FUNCTIONS</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>