使 UL 在父 DIV 中对齐中心答案

【问题标题】：Make UL align center in parent DIV使 UL 在父 DIV 中对齐中心
【发布时间】：2014-01-30 07:30:11
【问题描述】：

.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 元素应在 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 的解决方案不起作用：

【问题讨论】：

.list { display: block; max-width: 600px; margin: 0 auto; } 并从父级中删除 text-align center 怎么样？ 600px 需要根据您的喜好进行调整。

标签： css html

【解决方案1】：

删除

text-align: left;

来自.list

Updated fiddle here.

【讨论】：

如果你想让列表项左对齐，为什么不使用.list li { text-align: left; }？ ;)
@LucasTan 你用自己的演示试过了吗？当然，在 li 上设置 text-align: left; 会使其内容左对齐。如果不是，则有另一个规则与此冲突。
@LucasTan 我不明白你的意思。您想将 UL 居中，但将 LI 保持在左侧？在你的情况下，你不能两者兼得？你想让它看起来怎么样？你真的应该澄清这一点。

【解决方案2】：

默认情况下，ul 元素就像一个块，这意味着它将占用其父元素的 100% 宽度。所以如果你想让它居中，你必须将它的宽度设置为一个特定的像素或者改变显示属性：

.list{display:inline-block}

【讨论】：

【解决方案3】：

您的包含元素必须定义一个宽度；你不能只说text-align: center 让它工作。

这样做：

Updated Fiddle

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

【讨论】：