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

中心内联块保持文本对齐

2 个答案: