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>元素的'网格'居中，但仍以网格状格式显示？

我已经看到了其他一些与此有关的问题，但没有一个能解决我的问题 - 或者说它们描述的问题略有不同。

Answer 1

浮动div可防止它们居中...相反，请将您的包装div text-align: center和内部的div设为display: inline-block。无需display:table

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

Answer 2

请参阅演示：http://jsfiddle.net/3C6kt/

HTML

<div class="center_wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

.center_wrap {
  width:500px;
  text-align:center;
}

.box {
  width:100px; height:100px;
  background:#999;
  display:inline-block;
}

您可以在div中插入图像然后...

CSS - 使用{display：table}显示的中心元素

2 个答案: