居中内联块保持文本左对齐

Question

我有一组物品。是否可以将整个组居中，但确保新行上的项目出现在左侧而不是中心？

示例如下：http://codepen.io/anon/pen/yczku/

这就是我需要的：http://f.cl.ly/items/103O0n0h2N0n1k163E26/result.png

请注意，绿色单元格组在红色容器内居中，但每个新行仍然是左对齐的。

我应该提到，解决方案不能依赖于固定宽度（并设置固定填充或类似的东西）。我在示例中的容器上使用静态宽度只是为了确保它在所有屏幕上显示相同的大小。在我的最终项目中，这个结构具有动态宽度。

我知道使用 JavaScript/jQuery 可以实现我所需要的，但我对是否存在纯 CSS 解决方案感兴趣。

编辑：

示例中的每个绿色单元格都有静态宽度，但作为一个组，它们应该填满整个可用空间。因此，如果容器变宽，则第一行可以容纳超过 3 件物品，反之亦然 - 如果容器变窄，每行只能容纳 2 或 1 件物品。

Answer 1

如果您将正确的margin 或padding 添加到ul 容器，应该没问题： http://codepen.io/anon/pen/Drtoa/

* {
  margin: 0;
  padding: 0;
}

.container {
  border: 5px solid red;
  width: 800px; /* Will be dynamic! */
  margin: 0 auto;
}

ul {
  margin:0 100px;
}

li {
  border: 5px solid green;
  width: 200px;
  height: 200px;
  display: inline-block;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

Answer 2

假设li 元素是静态宽度，您只需将以下样式添加到ul 元素：

ul {
  width: 630px;
  margin: 0 auto;
}