<分区>
<分区>
一个多星期以来，我一直在尝试将链接/选项卡置于我的 Bootstrap 导航栏的中心，这让我很头疼。已经解决了这里所有类似的问题，但绝对没有任何效果。我在想我已经把规则加倍了，或者我实际上没有瞄准正确的东西。
这是 Dreamweaver 上的基本 Bootstrap 导航栏片段。我已经设法自定义颜色/字体/大小，但就是无法让该死的东西坐在中间。
.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>最佳答案
您可以使用 Flexbox 来做到这一点:
.navbar {
display: flex; /* displays flex-items (children) inline */
justify-content: center; /* centers them horizontally */
}
关于html - Bootstrap Navbar 链接不会居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44602423/