使父DIV中的UL对齐中心

Posted 2021-05-07

.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>

我正在尝试使UL成为DIV的中心。

要求：

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

尝试过这些但失败了：

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的解决方案不起作用：

答案

删除

text-align: left;

来自.list

Updated fiddle here.

另一答案

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

.list{display:inline-block}

另一答案

您的包含元素必须具有定义的宽度；您不能只说text-align: center使其起作用。

执行此操作：

Updated Fiddle

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