一個ul與css的動態中心對齊

我從數據庫中提取數據以ul格式打印。由於數據不同，我們可能有2個項目，或者我們可能有10個知道的項目。一個ul與css的動態中心對齊

什麼是最好的方法來中心ul或div會改變寬度？我知道到中心一個div或UL我會用以下內容：

#name, ul { 
width:200px; /*set certain width */ 
margin:0 auto; /* center div */ 
display:block /* play friendly with the existing layout */ 
}

我的問題是與DIV可能是200像素或超過200像素，並因此它不會真正爲中心的數據，因爲在div中心對齊基於寬度。

任何幫助，將不勝感激。

來源

2017-01-01 HollerTrain

嘗試'#name，ul { \t margin：0 auto; \t display：block; \t text-align：center; \t padding：0; }' – Banzay

從我的經驗我需要一個寬度居中div或ul。在你的例子中，缺少寬度會破壞任何對齊。 – HollerTrain

你沒有提供足夠的信息 – Banzay

這裏，您可以將具有動態內容長度的ul居中。

你可以用在一個div的ul並設置CSS屬性的DIV作爲

.wrapper{ 
    display:table; 
    margin: 0 auto; 
}

這將居中對齊div無論div的寬度ul裏面，你可以看到一個例子如下：

Codepen鏈接http://codepen.io/nadirlaskar/pen/RKbBpM

.wrapper{ 
 
    display:table; 
 
    margin: 0 auto; 
 
    background-color:yellow; 
 
} 
 

 
ul{ 
 
    background-color:red; 
 
} 
 

 
li{ 
 
    background-color:blue; 
 
}

<div class="wrapper"> 
 
    <ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2 is now large</li> 
 
    </ul> 
 
</div>

來源

2017-01-01 11:15:16

我很抱歉，但這並沒有解決手頭的問題。甚至不是很接近 – HollerTrain

檢查我更新的答案，它將以'ul'爲中心，而不管'ul'的內容的寬度。（鏈接到代碼筆：http://codepen.io/nadirlaskar/pen/RKbBpM） –

非常感謝你！我從來沒有遇到過這個解決方案。你搖滾！將此代碼移至生產中!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!! – HollerTrain

一個ul與css的動態中心對齊

回答

相關問題