居中元素的流体网格而不在父级上设置硬宽度

Question

我想将元素的“网格”居中，当调整大小时，它会自行调整为居中。

像这样：

 ___________________
|                   |
|    [] [] [] []    |
|    [] [] [] []    |
|    [] [] []       |
 -------------------
 ________________
|                |
|    [] [] []    |
|    [] [] []    |
|    [] [] []    |
|    [] []       |
 ----------------
 _____________
|             |
|    [] []    |
|    [] []    |
|    [] []    |
|    [] []    |
|    [] []    |
|    []       |
 -------------

我尝试设置max-width，但在调整大小时会导致此问题：

 ________________
|                |
|    [] [] []    |
|    [] [] []    |
|    [] [] []    |
|    [] []       |
 ----------------
 _____________
|             |
| [] []       |
| [] []       |
| [] []       |
| [] []       |
| [] []       |
| []          |
 -------------

我不认为为每个配置使用媒体查询和设置widths（甚至max-widths）是一个真正的解决方案。

我对 CSS3 持开放态度，只要它能够优雅地降级，并且希望避免使用 javascript。

编辑：添加非语义元素也是一个交易破坏者，一个容器div 或一些可以通过但不理想的东西。

标记应如下所示：

 <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
 </ul>

这里有一个demo 可以帮助您入门。

谢谢。

Answer 1

您对居中的确切要求仍然有点模糊（例如，您上面的所有插图都显示了偶数个元素，所以我不知道您对奇数的期望。在您的小提琴中，我刚刚在ul 中添加了text-align: center 并实现了居中效果（http://jsfiddle.net/nR9Mk/1/），但我不知道它是否如您所愿。

更新：如果您只处理偶数并且希望它们保持按二分组，那么这将起作用：http://jsfiddle.net/nR9Mk/8/。

第 2 轮：根据您透露的“奇数”要求，我提出了一个可行的解决方案。注意：1）它确实需要一些额外的 HTML 标记，2）你必须设置某种类型的实际限制来限制你想要去的宽度并且仍然可以得到效果。 Here 是带有outline 显示的“缓冲区”元素的代码，here 是删除了轮廓的代码。

第三轮：我知道你已经接受了我的回答，但我已经在努力解决这个问题，所以我想我还是会提供它。根据您的交易破坏者评论，here is a modified plan 这可能对您（或其他人）有用。它是一种混合体——“有时”它将元素向左推（通常是在最尴尬的时候），有时让它们保持“离开列”但居中。为了防止它看起来很“奇怪”，它被赋予了一个六列宽的max-width。