如何集中导航栏药丸？ [英] How to center nav bar pills?

问题描述

我似乎无法将它们置于容器内，我尝试使用文本对齐方式，但不起作用。我使用的是twitter bootstrap，所以也许有些事情会优先考虑？

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

推荐答案

div和使用文本中心，并使用display：inline-block。

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

这篇关于如何集中导航栏药丸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！