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没有被广泛支持，它就是唯一可靠的跨浏览器方式。

Answer 2

很抱歉，但无法使用直接的CSS + HTML做您想要的事情。（看看@Pekka的替代方案，但如果缩略图行没有填满整行，它们将在最后一行自己居中）

您需要在父对象.container上使用margin-left: auto和margin-right:auto固定宽度，因为它是一个流畅的宽度页面，所以您无法做到这一点。

以下是我将如何做到这一点，虽然它肯定会有一些你需要解决的错误：

将javascript事件绑定到window.resize事件
获取新文档宽度，并查看一行中适合的缩略图数量
将div.container的宽度设置为该宽度加上右边的一点边距。此div始终有margin-left和margin-right auto

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

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 on body。

如果IE6和IE7不能很好玩，你可以随时使用javascript / jquery将整个内容包装在一个表中。

请注意，我不敢为普通浏览器提供表格解决方案，尽管它显然可以完美运行; - ）

Answer 5

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

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

水平居中浮箱

5 个答案: