如何在沒有手動定義寬度的情況下居中div

Question

我在div內有一些項目符號點，我希望項目符號點垂直對齊。我也希望div位於頁面的中心。但是，我不想手動定義div的寬度，因爲我不知道每個項目符號的大小。如何在不預先定義寬度的情況下居中div？

我到目前爲止的代碼是：

<div style='text-align:left;width:100px;margin:0 auto'> 
    <ul> 
     <li>Alpha</li> 
     <li>Beta</li> 
     <li>Gamma</li> 
    </ul> 
</div> 

而一個的jsfiddle可以在http://jsfiddle.net/7R2qJ/

（注意，在該代碼中，DIV寬度被手動定義，這是我想避免找到）。

Answer 1

將text-align: center添加到父項，text-align: left添加到div。我發現這有助於IE的某些版本。然後將display: inline-block添加到div。

http://jsfiddle.net/7R2qJ/8/

<div> 
    <ul> 
     <li>Alpha</li> 
     <li>Beta</li> 
     <li>Gamma</li> 
    </ul> 
</div> 

-

body 
{ 
    text-align: center; 
} 

div 
{ 
    background: yellow; 
    text-align: left; 
    margin: 0 auto; 
    display: inline-block; 
} 

Answer 2

一種方法是使用display: table;與margin: 0 auto;

JS Fiddle

Answer 3

結合使用display:inline-block;屬性包裹div的寬度在其內容

fiddle

CSS

body 
{ 
    text-align: center; 
} 

.list 
{ 
    background: yellow; 
    text-align: left; 
    margin: 0 auto; 
    display:inline-block; 
} 

標記

<div class="list"> 
    <ul> 
     <li>Alpha</li> 
     <li>Beta</li> 
     <li>Gamma</li> 
    </ul> 
</div>