水平居中浮动框

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

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

但这会给您带来垂直边距和设置高度的额外问题。但据我所知，只要 inline-block 没有得到广泛支持，它就是唯一可靠的跨浏览器方式。

Answer 2

抱歉，但无法直接使用 CSS + HTML 完成您想要的操作。 （看看@Pekka作为替代方案，尽管如果缩略图行没有填满整行，它们将在最后一行上自行居中）

您需要在父对象上有固定的宽度.container 与 margin-left: auto 和 margin-right:auto 你不能这样做，因为它是一个流体宽度页面。

以下是我的做法，尽管它肯定存在一些需要解决的错误：

1. 将 javascript 事件绑定到 window.resize 事件
2. 获取新文档宽度并查看如何操作许多缩略图适合一行
3. 将 div.container 的宽度设置为该宽度加上右侧的一点边距。此 div 始终具有 margin-left 和 margin-right 为 auto

这将使缩略图最佳居中尽可能。根据您的视觉显示，您可能需要额外的包装 div 来提供 100% 宽度 背景。

Answer 3

使用带有内联列表元素的无序列表：

HTML:

<ul>
    <li><img src="image1.jpg" /></li>
    <li><img src="image2.jpg" /></li>
    <li><img src="image3.jpg" /></li>
    <li><img src="image4.jpg" /></li>
</ul>

CSS:

ul {
    width: 960px;
    text-align: center;
}

ul li {
    display: inline;
}

只要 LI 元素内没有块级元素就可以。如果您有不止一行图像，也可以使用；）您也可以使用 div，但使用列表在语义上更好。

Answer 4

.container 上的内联块和自动边距对于大多数浏览器来说应该可以解决问题，也许正文上的 text-align:center 也可以。

如果 IE6 和 IE7 不能很好地发挥作用，您可以随时使用 javascript / jquery 将整个内容封装在一个表格中，供它们使用。

请注意，我不敢为普通浏览器建议一个表格解决方案，尽管它显然可以完美地工作;-)

Answer 5

样式边距：0 自动；将使元素居中。但需要指定父容器的宽度。

<div style="width:100%; float:left; margin: 0 auto;">
   /* Your Child Elements */
</div>