将ul放在容器中居中，同时使li内侧对齐

Question

我想知道是否有一种方法可以在容器内将ul居中，而将li对齐。

http://jsfiddle.net/82dzt0te/1/

#container ul {
    text-align: left;
    list-style:none;
    padding:0;
    margin:0 auto;
}

#container ul li {
    display: inline-block;
}

如果以li换行到下一行的方式调整屏幕大小，则右侧将以一列显示空白。 这个想法不是要有正确的白色边框。 （李将是相同的大小）

如何实现（如果可能）？

这是我想要实现的示例。 http://oi58.tinypic.com/2j674ex.jpg

Answer 1

这是您要查找的CSS：

#container ul {
    background-color: blue;
    text-align:center;
}

li {
    display: inline-block;
}

https://jsfiddle.net/82dzt0te/6/

Answer 2

使用弹性版面：

http://jsfiddle.net/x579701e/

#container ul 
{
    text-align: left;
    list-style:none;
    padding:0;
    margin:0 auto;
    display: flex;
    flex-wrap: wrap;
}

#container ul li 
{
    min-width: 150px;
    max-width: 100%;
    height: 150px;
    flex: 1 0 0;
    border: solid 1px red;
}

#container img {width: 100%; height: 100%;}

Answer 3

我相信您想要做的就是这个演示

您需要给ul一个width属性。 如果您希望调整大小，则应为％，而不是px。 然后给它一个您已经做过的0 auto边距。

请注意，如果您不提供宽度， margin:0 auto无效。

更新

尝试这个

Answer 4

尝试使用“ display：table;” 在ul。 这样，您不必依赖ul宽度即可使内容居中，并且li元素会将文本向左对齐。 像这样：

#nav {

}

#container ul {
    display: table;
    text-align: center;
    list-style:none;
    padding:0;
    margin:0 auto;
}

#container ul li {
    display: inline-block;
    text-align:left;
}

您可以在此处查看演示：

http://jsfiddle.net/kswxs6v1/