html - 居中左对齐列表项

Question

我有一组列表项，我希望它们在包装时保持对齐，但在列表中居中，类似于 iOS 图标在主屏幕上的显示方式。

我的问题是，在某些屏幕尺寸下，元素会自动换行，但不需要的填充会保留在右侧。

我知道我可以在父容器中将列表居中，但这仍然不会使列表项居中，因为列表本身正在创建额外的填充。

我的样式如下:

li {
    width: 100px;
    height:100px;
    background-color: blue;
    float: left;
    margin: 5px;
}
ul {
    list-style: none;
    text-indent: none;
    padding-left: 0;
    background-color: green;
    display: inline-block;
    margin: 0 auto;
    padding: 0;
}

这个 fiddle 演示了问题:http://jsfiddle.net/Ea8Kd/1/

如何删除不需要的填充，或将列表中的元素居中，同时确保第二行左对齐？

Answer 1

不确定这是你想要的但我添加了

ul {
   max-width: 550px;
   }

删除了右侧的填充。

如果不是这样，您能否展示您想要的图片？您的问题不是 100% 清楚。