水平居中我的圖標

我在div元素中有一些動態創建的JQuery Mobile圖標。可以顯示0到4個圖標，具體取決於某些變量。水平居中我的圖標

我想確保這些圖標是水平居中的，無論顯示多少，即使通過大量線程閱讀，我仍然沒有想出如何使其工作。

代碼：

HTML：

<div class="icons"> 
    <span class="reported notifIcon ui-btn ui-icon-alert ui-btn-icon-notext ui-corner-all">Reported often</span> 
    <span class="verf notifIcon ui-btn ui-icon-star ui-btn-icon-notext ui-corner-all">Verified</span> 
    <span class="active notifIcon ui-btn ui-icon-clock ui-btn-icon-notext ui-corner-all">Recently active</span> 
</div>

CSS：

.icons { 
    width: 100%; 
    height: 60px; 
} 

span.notifIcon { 
    float: left; 
    width: 30px; 
    height: 30px; 
} 

div span.notifIcon.reported { 
    border-radius: 25px; 
    background-color: rgba(209, 44, 44, 0.4); 
} 

div span.notifIcon.verf { 
    border-radius: 25px; 
    background-color: rgba(16, 105, 203, 0.4); 
} 

div span.notifIcon.active { 
    border-radius: 25px; 
    background-color: rgba(89, 219, 42, 0.4); 
}

我不包括jQuery Mobile的提供的類，因爲我沒有在的jsfiddle使用它們要麼。另外我也有過於特定的CSS選擇器，因爲它們應該從JQuery Mobile類中脫穎而出。

https://jsfiddle.net/dLLcrag0/

有什麼我試過了嗎？

我試過margin 0 auto;方法以及display: table;。我嘗試了display: inline的方法，但它們不適用於我的位置，因爲它會弄亂圖標和「notext」。也嘗試使用div而不是跨度，但這也沒有改變任何東西。

感謝您提前提供任何幫助。

來源

2015-06-19 Jakob Abfalter

https://jsfiddle.net/dLLcrag0/1/這是第一天的CSS的東西，男人。 – connexo

https://jsfiddle.net/dLLcrag0/2/您應該將span設置爲內聯塊，否則它不會佔用高度。 Float將它們轉換爲塊級元素，但由於您沒有使用float，所以需要設置display屬性。 – Leeish

span元素是默認的內聯元素，因此將遵循text-algin: center;屬性。如果你需要一個設定的高度，你必須讓它們成爲inline-block元素。設置它們，並將其父母設置爲text-algin: center，它們將始終居中。您也可以在其側面添加邊距以增加間距。

https://jsfiddle.net/dLLcrag0/2/

來源

2015-06-19 18:28:56 Leeish

水平居中我的圖標

回答

相關問題