水平居中浮动框箱

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，但是方框需要在页面上水平居中...

提前感谢。

- fidoboy

Answer 1

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

但是，这将导致您在垂直边距和高度设置方面遇到其他问题。但据我所知，只要inline-block没有得到广泛支持，这是唯一可靠的跨浏览器方法。

- Pekka

---

我认为这个问题已经很清楚地说明了为什么你的修复方法不起作用。 - Doug Neiner

@Pekka，SO 不喜欢我 :) 它不让我取消我的踩。你能再进行一次编辑吗？ - Doug Neiner

+1，非常好的答案，我没有想到那个。最后一排拇指是否保持网格模式？我想知道那是否重要。 - Doug Neiner

Answer 2

抱歉，无法使用纯CSS + HTML完成您想要的操作。（但可以查看@Pekka的替代方案，如果缩略图行未填满整行，则它们将在最后一行自行居中）

您需要在父元素.container上设置固定宽度，并使用margin-left:auto和margin-right:auto，但由于这是流体宽度页面，因此无法实现。

以下是我会处理它的方式，但肯定会有一些错误需要解决：

1. 将javascript事件绑定到window.resize事件
2. 获取新的文档宽度并查看一行可以容纳多少个缩略图
3. 将div.container的宽度设置为该宽度加上右侧的小边距。 此div始终具有auto的margin-left和margin-right

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

- Doug Neiner

---

好的，我认为这可能是最简单的解决方案，我原以为只需要使用CSS就可以解决这个问题，但似乎我还需要使用JavaScript... - fidoboy

能否请那位点踩的用户花点时间提供有益的反馈，以便我改进我的回答呢？ - Doug Neiner

太棒了！在使用jQuery的帮助下，我已经解决了它...非常感谢dcneiner！！ - fidoboy

没有人会从我这里得到负面评价，但是我建议对于支持CSS的浏览器使用CSS，并且对于IE浏览器，使用JavaScript将容器包装在表格中。这样你就不必担心调整大小的问题了。 - jeroen

@codyc4321 是的，他们关心他们的用户。至于为什么允许没有评论的负投票，请在meta.stackoverflow.com上搜索该话题。 - Modus Tollens

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，但是使用列表语义上更加合适。

- Tatu Ulmanen

---

这个不起作用，因为你在示例中使用了固定宽度（960像素）... - fidoboy

@fidoboy 对于他的示例来说，宽度并不是必需的，但如果每行有6个项目，最后一行有3个，则最后3个项目将居中，而不与前面的行对齐。 - Doug Neiner

Answer 4

对于大多数浏览器，.container 上的 inline-block 和自动边距应该就可以解决问题了，可能还需要在 body 上使用 text-align:center。

如果 IE6 和 IE7 不友好，您总是可以使用 JavaScript / jQuery 将整个内容包装在一个表格中。

请注意，我不敢建议在正常浏览器中使用表格解决方案，尽管它显然可以完美地工作 ;-)

- jeroen

Answer 5

样式 margin: 0 auto; 可以使元素居中。但是您需要指定父容器的宽度。

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

- Nalan Madheswaran