如何居中导航栏丸？

Question

我似乎无法将它们居中放置在容器中，我尝试使用文本对齐方式但无法正常工作。 我正在使用Twitter Bootstrap，所以也许有些事情要优先处理？

 <div class="container">
     <ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">TierList</a></li>
      <li role="presentation"><a href="#">Tournaments</a></li>
      <li role="presentation"><a href="#">Team Maker</a></li>
      <li role="presentation"><a href="#">Counters</a></li>
      <li role="presentation"><a href="#">Forum</a></li>
      <li role="presentation"><a href="#">Contact Us</a></li>
    </ul>

的CSS

 .nav-pills > li > a {
 margin-right:10px; /* pill spread */
 font-family: "kodakku"; /* font */
 font-size: 20px;
 }

Answer 1

用另一个div结束导航并使用text-center，然后使用display：inline-block。

的HTML

<div class="container">
  <div class="text-center">
     <ul class="nav nav-pills" role="tablist">
         <li role="presentation" class="active"><a href="#">Home</a></li>
         <li role="presentation"><a href="#">TierList</a></li>
         <li role="presentation"><a href="#">Tournaments</a></li>
         <li role="presentation"><a href="#">Team Maker</a></li>
         <li role="presentation"><a href="#">Counters</a></li>
         <li role="presentation"><a href="#">Forum</a></li>
         <li role="presentation"><a href="#">Contact Us</a></li>
      </ul>
  </div>
</div>

的CSS

.nav-pills{
    display: inline-block;
}

.nav-pills > li > a {
    margin-right:10px; /* pill spread */
    font-family: "kodakku"; /* font */
    font-size: 20px;
}