水平居中對齊 <ul> 行左對齊

Question

我能夠使用text-align:center水平列表text-align:center ，但是我想知道如何在容器內使其居中，但行卻向左對齊。

我的容器具有百分比寬度，因此在調整窗口大小和重新排序塊時我需要它工作

---

請檢查下面的示例圖片以了解我的問題：

更新：

請根據要求找到JsFiddle

我需要將<ul>放在div.container內部

Answer 1

用這個：

ul {
    margin: auto;
}

li {
    float: left;
}

Answer 2

看到這個小提琴 ：

您已經知道在<ul>中間<ul> margin: auto; 關鍵是在其中調整<li> 。

您可以使用float: left; 或者：您可以設置display: inline-block; 兩者具有相似的效果，但不完全相同。 播放w / it。

通過提供邊距和百分比寬度，您可以播放w / size和元素分隔。

由於這些都是塊級元素，因此它們將自動堆疊和包裝。 通過浮動或更改<li>顯示，可以使它們在其父元素（ <ul> ）中保持左對齊。

而且，通過使用單獨的CSS類而不是直接定位<li>元素，可以使事情靈活一些，以防您想要有一個右對齊的列表，或者以后需要其他一些選項。

Answer 3

將您的盒子包裝在另一個div 。

然后可以使用display: block; margin: 0 auto;將該div居中display: block; margin: 0 auto; display: block; margin: 0 auto; ，同時保持框左對齊。