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包裹你的导航并使用文本中心，然后使用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;
}

如何集中导航棒丸？

1 个答案: