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;
}

这是LIVE版本。调整页面时，您会注意到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

试图集中UL

1 个答案: