我正试图将导航栏的内容居中，但由于某种原因文本对齐：居中不起作用。这是我的HTML：
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- NAVBAR -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar_clps">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse main-nav navbar-collapse" id="navbar_clps">
<ul class="nav navbar-nav">
<!--<li class="hidden"><a class="page-scroll" href="#page-top"></a></li>-->
<li><a class="page-scroll color_animation" href="#about">About</a></li>
<li><a class="page-scroll color_animation" href="#services">Services</a></li>
<li><a class="page-scroll color_animation" href="#reservation">Reservation</a></li>
<li><a class="page-scroll color_animation" href="#contact">Contact us</a></li>
<li><a id="login_lnk" class="page-scroll color_animation" href="#login" data-toggle="modal">Login</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
这里是CSS：
.main-nav a {
font-size: 20px;
font-weight: 700;
text-decoration: none;
color: #000;
display: block;
text-align: center;
padding: 2px 0;
transition: color 0.3s ease-in-out;
}
.main-nav {
text-align: center !important;
/*margin: auto 0 auto;*/
}
li {
color: white !important;
word-spacing: 5px !important;
}
我知道这个问题已经被问过了，我甚至看了一些问题，但他们没有帮助我（正如我所说，文本对齐不工作，它不是一个重复，因为解决方案有文本对齐）。
. navbar向左浮动，只需将其设置为浮动：无；显示：内联-块；最后使容器文本对齐：中心；
.main-nav a {
font-size: 20px;
font-weight: 700;
text-decoration: none;
color: #000;
display: block;
text-align: center;
padding: 2px 0;
transition: color 0.3s ease-in-out;
}
.nav-center{
display: inline-block;
float: none !important;
}
li{
color: white !important;
word-spacing: 5px !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar_clps">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse main-nav navbar-collapse text-center navbar_clps">
<ul class="nav navbar-nav nav-center">
<!-- <li class="hidden"><a class="page-scroll" href="#page-top"></a></li>-->
<li><a class="page-scroll color_animation" href="#about">About</a></li>
<li><a class="page-scroll color_animation" href="#services">Services</a></li>
<li><a class="page-scroll color_animation" href="#reservation">Reservation</a></li>
<li><a class="page-scroll color_animation" href="#contact">Contact us</a></li>
<li><a id="login_lnk"class="page-scroll color_animation" href="#login" data-toggle="modal" >Login</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
您可以使用CSS Flexbox。比如：
/* Use media query to only show it on tablets & desktops (to prevent menu from breaking on mobiles) */
@media screen and (min-width: 768px) {
#navbar_clps {
display: flex !important;
justify-content: center;
}
}
看看下面的片段（使用全屏）：
.main-nav a {
font-size: 20px;
font-weight: 700;
text-decoration: none;
color: #000;
display: block;
text-align: center;
padding: 2px 0;
transition: color 0.3s ease-in-out;
}
.main-nav {
text-align: center !important;
/*margin: auto 0 auto;*/
}
li {
color: white !important;
word-spacing: 5px !important;
}
@media screen and (min-width: 768px) {
#navbar_clps {
display: flex !important;
justify-content: center;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- NAVBAR -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar_clps">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse main-nav navbar-collapse" id="navbar_clps">
<ul class="nav navbar-nav">
<!-- <li class="hidden"><a class="page-scroll" href="#page-top"></a></li>-->
<li><a class="page-scroll color_animation" href="#about">About</a></li>
<li><a class="page-scroll color_animation" href="#services">Services</a></li>
<li><a class="page-scroll color_animation" href="#reservation">Reservation</a></li>
<li><a class="page-scroll color_animation" href="#contact">Contact us</a></li>
<li><a id="login_lnk"class="page-scroll color_animation" href="#login" data-toggle="modal" >Login</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
添加这个CSS
.navbar-nav {
float: none !important;
margin: 0px auto !important;
width: 437px !important;
}
