How to center nav bar pills?

问题

i cant seem to center them within the container, i tried using text align but wouldnt work. I am using twitter bootstrap so maybe something is taking priority?

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

回答1:

Wrap up your nav with another div and use text-center, and use 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;
}

来源：https://stackoverflow.com/questions/26825184/how-to-center-nav-bar-pills

标签

html

css

twitter-bootstrap

button

navbar