中心對齊李的使用文本對齊：中心不起作用

我有一堆李的超鏈接在他們。這裏有一個演示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屬性重寫我的設置，而李的左對齊。檢查左對齊的最底行。

#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設置。中心對齊我的意思是如果元素跨越兩行，第二行只有三個元素，那麼這些元素必須是中心對齊的，而不是左對齊。

更新：明白了。問題出在我在我的類別中應用的屬性navbar-nav，這是將元素左對齊。我刪除它。

來源

2015-08-13 CuriousDev

我在Chrome上面運行你的代碼。所有'li'都集中在容器中。還有其他問題嗎？ –

這是你的確切代碼上面：http://jsfiddle.net/xmd8bc68/ ..一切都以中心 –

增加元素的數量，它不。檢查這個http://jsfiddle.net/xmd8bc68/1/ – CuriousDev

我已經嘗試將這些CSS屬性添加到您的UI並且它可以解決問題;

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

結帳鏈接，讓我知道;

Nav Aligned

更新：

如果你期待有你的第二行的中心對齊，請從您#category刪除text-align:left !important並添加text-align:center代替，這結帳的jsfiddle：

Navs

來源

2015-08-13 03:11:55

謝謝。我剛剛檢查過，但沒有。如果你看到最後一行仍然是左對齊的。我添加了一些addtnl信息。 – CuriousDev

您期待第二行居中？ –

是完全和類似的任何行下面它取決於每行的元素數量 – CuriousDev

運行OSX。只需在Chrome，Firefox和Safari中檢查您的代碼。以每一個爲中心。你是否也許使用IE作爲瀏覽器？

來源

2015-08-13 03:27:28

中心對齊李的使用文本對齊：中心不起作用

回答

相關問題