水平居中浮动框答案

【问题标题】：Center float boxes horizontally水平居中浮动框
【发布时间】：2013-11-14 14:07:03
【问题描述】：

我想显示一些浮动框（包含缩略图的 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 css-float alignment

【解决方案1】：

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

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

【讨论】：

我认为这个问题清楚地说明了为什么您的修复不起作用。
@Pekka，所以不喜欢我 :) 它不会让我收回我的反对票。是否可以再进行一次编辑？
+1 对于很好的答案，没有考虑到这一点。最后一行拇指不会保持网格模式。我想知道这是否重要。

【解决方案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 背景。

【讨论】：

好的，我认为这可能是最简单的解决方案，虽然我只能使用 CSS 来解决这个问题，但似乎我还需要使用 javascript...
投反对票的人能否花时间提供有用的反馈，以便我可以更好地回答？
太棒了！我已经在 jQuery 的帮助下解决了这个问题，现在它可以工作了......非常感谢 dcneiner！
我不反对，但同样我会建议支持它的浏览器使用 css，并使用 javascript 将容器包装在 IE 的表中。这样您就不必为调整大小而烦恼。
@jeroen 我对其他解决方案的唯一问题是它们会破坏网格模式。通过将所有内容居中text-align: center，最后一行不会与前一行在网格中对齐。由于 OP 提到了“缩略图”，我认为一致的网格模式对它很重要。

【解决方案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，但使用列表在语义上要好得多。

【讨论】：

这不起作用，因为你在你的例子中使用了一个固定的（960px）......
@fidoboy 他的示例不需要宽度，但如果每行有 6 个项目，最后 3 个项目。最后 3 行将居中，与前面的行不一致。

【解决方案4】：

.container 上的 inline-block 和自动边距应该可以为大多数浏览器解决问题，也许 text-align:center 在正文上也是如此。

如果 IE6 和 IE7 玩得不好，你总是可以使用 javascript / jquery 将整个东西包装在一个表格中，只为它们。

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

【讨论】：

【解决方案5】：

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

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

【讨论】：