html - 居中行内 block 保持文本左对齐

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