水平居中浮箱

Question

我想显示一些浮动框(包含缩略图的div),缩略图的数量取决于当前的页面宽度.例如:

<div class="container">
  <div class="box1" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box2" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box3" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box4" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
    .......... ETC
</div>

问题是,对于给定的宽度,它显示每行上有4个方框,但它们都是左对齐的,右边有一些空白区域,我怎样才能水平居中每一行？

像这样的东西:http://realworldstyle.com/thumbs_3.html但页面上水平居中的框...

提前致谢,

Answer 1

我认为让元素居中的唯一方法是不使用float,而是设置图像display: inline.这样,您可以使用父容器的text-align属性随意对齐它们.

但这会给你垂直边距和设置高度的其他问题.但据我所知,只要inline-block没有得到广泛支持,它就是唯一可靠的跨浏览器方式.