css – 水平居中浮动框

我想显示一些浮动框(包含缩略图的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,但在页面上水平居中的盒子……

提前致谢,

对不起,但是无法用直接的CSS HTML做你想做的事情. (看看@Pekka的替代方案,但如果缩略图行没有填满整行,它们将在最后一行自己居中)

您需要在父对象.container上使用margin-left：auto和margin-right：auto,因为它是一个流体宽度的页面,所以你不能这样做.

这是我将如何去做,虽然它肯定会有一些你需要解决的错误：

>将javascript事件绑定到window.resize事件
>获取新文档宽度,并查看一行中适合的缩略图数量
>将div.container的宽度设置为该宽度加上右边的一点边距.这个div总是有一个自动左边距和右边距

这将尽可能地使缩略图居中.根据您的视觉显示,您可能需要一个额外的包装div来提供100％宽度的背景.