试图以 UL 为中心

Question

我正在尝试正确居中 UL。即使我使用了 display:table 和正确的 margin: 0 auto... 仍然无法正常工作。它不去中心。

我做错了什么？

UL 和 LI 的 CSS

.container { 
    position: relative; 
    display:table; 
    margin-left:auto;
    margin-right:auto;
}


.container li {
    margin: 30px 30px;
    padding: 0;
    display: inline;
    clear: none;
    float: left;
    width: 310px;
    height: 370px;
    position: relative;
    list-style: none;
}

这是现场版。调整页面时，您会注意到 UL 停靠在页面的左侧。

更新 http://codepen.io/mariomez/pen/doJvJz?editors=010

注意：问题基本解决了。唯一的问题是 LI 组件也是居中对齐的，这对我来说在视觉上并不好。如何将它们向左对齐并保持 UL 居中？

Answer 1

将.container 与text-align: center; 放在一起，禁用浮动列表元素并为它们使用display: inline-block; 而不是display: inline;：

.container {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    text-align: center;
}


.container li {
    margin: 30px 30px;
    padding: 0;
    display: inline-block;
    clear: none;
    width: 310px;
    height: 370px;
    position: relative;
    list-style: none;
}

演示：JSFiddle