中心将水平<ul>与左对齐行对齐</ul>

Question

我能够将text-align:center的水平列表居中，但我想知道如何将它保持在容器内的中心，但是左边的行是对齐的。

我的容器有百分比宽度，所以我需要它在调整窗口大小和块重新排序时工作

---

请检查下面的示例图片以了解我的问题：

更新

Please find JsFiddle as per request

我需要将<ul>置于div.container

之内

Answer 1

使用此：

ul {
    margin: auto;
}

li {
    float: left;
}

Answer 2

请参阅this fiddle：

您已知道<ul>与margin: auto;居中 关键是要调整其中的<li>。

你可以使用float: left;来做到这一点 或者：您可以设置display: inline-block; 两者都有类似的效果，但并不相同。玩它吧。

提供保证金＆amp;百分比宽度，你可以播放大小和元素的分离。

由于这些都是块级元素，因此它们会叠加起来。自动换行。 通过浮动或更改<li>的显示，您可以将它们保持在父元素（<ul>）内左对齐。

此外，通过使用单独的CSS类而不是直接定位<li>元素，您可以保留灵活性，以防您想要拥有右对齐列表或稍后的其他选项。

Answer 3

将你的盒子包裹在另一个div内。

然后，您可以使用display: block; margin: 0 auto;将该div居中，同时保持框左对齐。