如何在不手动定义宽度的情况下居中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>

可以在http://jsfiddle.net/7R2qJ/

找到JSFiddle

（请注意，在此代码中，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>