twitter-bootstrap - 使用 text-align : center does not work 居中对齐 Li

Question

我有一堆带有超链接的 li。这是一个演示 http://codepen.io/anon/pen/aOxJyr

<div class="collapse navbar-collapse" id="categorycollapse">
    <ul id="Category" class="row list-inline  nav navbar-nav">      
        <li>
            <a href="/products/Category/Cars">
                Cars
            </a>
        </li>

        <li>
            <a href="/products/Category/Cars%20R">
                Cars R
            </a>
        </li>

        <li>
            <a href="/products/Category/Bus">
                Bus
            </a>
        </li>

        <li>
            <a href="/products/Category/Bus">
                Bus
            </a>
        </li>

        <li>
            <a href="/products/Category/Tempo">
                Tempo
            </a>
        </li>

        <li>
            <a href="/products/Category/Cycle">
                Cycle
            </a>
        </li>

        <li>
            <a href="/products/Category/Jet">
                Jet
            </a>
        </li>   
    </ul>
</div>

我为这些列表项使用了以下 CSS 以将它们居中对齐。但看起来其他一些 css 属性覆盖了我的设置，而 li 的设置改为左对齐。检查左对齐的最底部行。

#Category {
    border:1px solid #C4C6C6;
    margin: 0 60px 0 60px;
    padding: 20px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    text-align: center !important;
}

#Category > li {
    font-family: 'Open Sans',sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-top: 15px;
    margin-left: 20px;
    padding: 0 0 20px;
    display: inline-block;
}


#Category li a, ol li a {
 background-color: #07575B;
  color: #FFFFFF;
        transition: background .2s ease-in;
    -o-transition: background .2s ease-in;
    -moz-transition: background .2s ease-in;
    -webkit-transition: background .2s ease-in;
        padding: 10px 10px;
    border-radius: 3px;
    font-size: 14px !important;
    display: inline !important;
}

如何以覆盖所有 css 设置的方式居中对齐列表。对于居中对齐，我的意思是如果元素跨越两行，而第二行只有 3 个元素，那么这些元素必须居中对齐，而不是左对齐。

更新:知道了。问题出在我应用在我的类别上的属性 navbar-nav 上，该属性左对齐元素。我删除了它。

Answer 1

我已经尝试将这些 CSS 属性添加到您的 UI 中，它似乎可以解决问题；

#Category > ul {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

检查链接并告诉我；

Nav Aligned

更新:

如果您希望第二行居中对齐，请从 #category 中删除 text-align:left !important 并添加 text-align:center 相反，检查这个 jsfiddle:

Navs