在父DIV中建立UL对齐中心

Question

请参阅http://jsfiddle.net/5Y5gc/（在Chrome中查看）

.list{
    list-style: none;
    display: inline-block;
    text-align: left;
    margin:0;
    padding:0;
    margin-left:-20px;
}

.list > li {
    display: inline-block;
    width: 100px;
    height : 100px;
    border: 1px solid black;
    margin: 0;
    padding: 0;
    margin-left: 20px;
    margin-bottom: 20px;
}


<div style="text-align:center">
<ul class="list">
    <script>
        for (var i=0;i<60;i++)
        document.write("<li></li>");
    </script>
</ul>
</div>

我正在尝试在DIV中建立UL中心。

要求：

• UL应足够大以容纳LI元素。
• LI elems应该在UL内左对齐（通过float：left，text-align：left或者其他方式）

试过这些但失败了：

Why won't my Div center itself in its parent?

Centering an UL inside a DIV

How to horizontally align ul to center of div?

@ mark的解决方案不起作用：

Answer 1

删除

text-align: left;

来自.list

Updated fiddle here.

Answer 2

默认情况下，ul元素就像一个块，这意味着它将占用它父级的100％宽度。 因此，如果您希望它为中心，则必须将其宽度设置为特定像素或更改显示属性：

.list{display:inline-block}

Answer 3

您的包含元素必须定义宽度;你不能只说text-align: center让它发挥作用。

这样做：

Updated Fiddle

基本上你只是在包含元素上定义了一些属性并取出了margin-left: -20px。在你的代码中。