居中对齐的浮动块答案

【问题标题】：Center aligned floating blocks居中对齐的浮动块
【发布时间】：2011-09-18 00:31:20
【问题描述】：

我试图弄清楚如何拥有一个可以包含中心对齐浮动块的流体模板。我认为以下图片显示了它应该如何工作。

模板是流动的，可以调整大小。浮动框将覆盖屏幕的宽度，其余的将居中对齐。

如果用户调整窗口大小，剩余的浮动框仍将居中对齐。

我不确定如何使用 CSS（仅可能）或使用 jQuery 来实现这一点？

【问题讨论】：

标签： jquery html css

【解决方案1】：

http://jsfiddle.net/VpLGf/ 在 chrome 13 中适用于我

它应该适用于除 IE5.5、IE6 和 IE7 之外的所有“现代”浏览器

您在这里基本上想要的是一组元素，这些元素使用float 显示为inline 或看起来像inline。您还希望元素表现得像 block，因为您希望它们占用分配给它们的空间，而不仅仅是适合（没有内容，内联而不是块元素将是不可见的）

给定 html：

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

和css

.block{
  width: 100px;
  height: 100px;
  background-color: black;
  margin: 20px;
}

所以解决方案可以是给div.block 一个float: left 或给他们一个display: inline-block；

现在元素仍然需要在页面中间对齐。使用float:left 解决方案这是不可能的，因为无论如何所有元素都左对齐（它们逃脱了“正常”文档流），但是使用display: inline-block，您可以将父级放在text-align: center 上，所有元素都对齐如你所愿

【讨论】：

在 Firefox 3.6 / Opera 11.51 / IE 8 中也是如此。
+1 是一个不错的解决方案。不过，如果你能向 OP 解释你是如何做到的，那会更有帮助;-)

【解决方案2】：

这只是一个猜测 - 但我相信，如果每个框都是 <span> 并且最后一行仅设置在 <span style="margin: 0 auto"></span> 的另一个范围内，这可能会达到您想要的效果。

因此，底线的框将是 <span> 在具有样式集的另一个跨度内。

我只是把它扔在那里，希望其他人可以编辑答案以更精确/正确。

【讨论】：