Html 在Bootstrap3中创建导航栏时，我似乎无法使按钮居中

我正在创建一个带有导航栏的网站。我希望导航栏以100%的宽度穿过屏幕，但我需要按钮居中。 以下是我的html代码：

<div class = "collapse navbar-collapse navHeaderCollapse">                           
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">NEWS</a></li>                                           
<li class = "dropdown">

 <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">MEDIA <b class = "caret"></b></a>
 <ul class = "dropdown-menu">
 <li><a href = "#">MUSIC</a></li>
 <li><a href = "#">VIDEO</a></li>
 <li><a href = "#">PICTURES</a></li>                                                     
 </ul>                                          
</li>
<li><a href = "#">SHOWS</a></li>
 <li><a href = "#">Contact</a></li>

  </ul> 

  </div>

我认为这一定是一个简单的css修复，但我似乎只能集中整个导航栏，而不仅仅是按钮链接。任何帮助都很好，谢谢！ 代码链接

更新： 现在我改变了主意

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

---

按钮现在居中，但当导航栏折叠时，导航按钮将水平显示，而不是垂直显示。关于如何解决这两个问题有什么建议吗？

删除

li

元素上的

float

，并使用

display:inline block

对于您来说，这不是居中的原因（即使

.nav

具有

文本对齐：居中

）是

li

元素浮动

左侧

，这将使元素忽略

文本对齐

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

---

但是现在当它折叠时，它不再是垂直的，按钮是水平的。好吧，我想我已经弄明白了，我添加了@media（最小宽度：768px）{.navbar.navbar{display:inline block；float:none；vertical align:left；}来在移动模式下水平显示。我想这已经解决了。

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