html - CSS - 以 {display : table} 显示的中心元素

Question

我正在尝试显示多个 <div>标签(其中有 <img /> 标签，它们以网格形式排列，它们并排直到父元素的末尾，此时下一个 <div> 将换行。

我有代码:

<div style="text-align:center; height: auto; ">

  <div style="display: table; margin: auto">

    <div style="width: 200px; height: 250px; float: left;">
      <img src="image1.jpg" height="200" width="200" />
    </div>
    <div style="width: 200px; height: 250px; float: left;">
      <img src="image2.jpg" height="200" width="200" />
    </div>
    <div style="width: 200px; height: 250px; float: left;">
      <img src="image3.jpg" height="200" width="200" />
    </div>
    <div style="width: 200px; height: 250px; float: left;">
      <img src="image4.jpg" height="200" width="200" />
    </div>
    <div style="width: 200px; height: 250px; float: left;">
      <img src="image5.jpg" height="200" width="200" />
    </div>
    <div style="width: 200px; height: 250px; float: left;">
      <img src="image6.jpg" height="200" width="200" />
    </div>
    <div style="width: 200px; height: 250px; float: left;">
      <img src="image7.jpg" height="200" width="200" />
    </div>

  </div>

</div>

输出就差不多了。 <div>元素按预期换行，但未按预期居中。

我的问题是:我需要做什么才能获得 <div> 的“网格”元素居中，但仍以类似网格的格式显示？

我已经看到了一些与此相关的其他 SO 问题，但它们都没有解决我的问题 - 或者更确切地说，它们描述的问题略有不同。

Answer 1

float div 使它们无法居中...相反，使包装 div text-align: center，并将内部的 div 作为 display: inline-block。不需要 display:table

像这样:http://jsfiddle.net/ceL79/