如何使导航栏药丸居中？答案

【问题标题】：How to center nav bar pills?如何使导航栏药丸居中？
【发布时间】：2014-11-09 05:06:32
【问题描述】：

我似乎无法在容器中将它们居中，我尝试使用文本对齐但不起作用。我正在使用 twitter 引导程序，所以也许有什么优先考虑？

 <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;
 }

【问题讨论】：

标签： html css twitter-bootstrap button navbar

【解决方案1】：

用另一个 div 包裹你的 nav 并使用 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;
}

【讨论】：