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

Posted 2023-03-29

【中文标题】居中内联块保持文本左对齐

【英文标题】：Center inline-blocks keeping text-align left

【发布时间】：2014-05-27 01:28:22

【问题描述】：

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

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

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

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

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

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

编辑：

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

【问题讨论】：

“li”元素会是静态宽度吗？

每行包含三个<li>元素是否恒定？

每个 'li' 元素都有静态宽度，但整个组应该填满整个可用空间（因此，如果容器更宽，所有 5 个元素都可以放在 1 行中）

【参考方案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;

【参考方案2】：

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

ul 
  width: 630px;
  margin: 0 auto;

【讨论】：

感谢您的回答，但这样即使容器足够宽，每行也只能容纳 3 个项目。抱歉，如果不清楚，我已经编辑了问题。