在容器内水平流动项目 w/ 中心对齐答案

【问题标题】：Flowing items horizontally w/ center alignment within a container在容器内水平流动项目 w/ 中心对齐
【发布时间】：2012-08-10 16:02:37
【问题描述】：

我的困境是这样的（我怀疑应该很简单）：我有一个容器和一组项目（都是 div）。以下 CSS 适用：

.container {
    float:          left;
    width:          100%;
}


.item {
    margin:         32px;
    text-align:     center;
    position:       relative;
    float:          left;
}

.item 本身是一个容器，可以包含几乎任何任意元素集，但它们需要在其中居中对齐（在我的例子中，它通常包含一个缩略图图像和它下面的一个小文本标题） .虽然上面的 CSS 允许每个 .item 以我喜欢的方式水平流动，但我不知道如何使整个集合中心对齐（而不是像现在这样从左到右流动）。

【问题讨论】：

为什么当您将宽度设置为 100% 并显示为阻止时，您会浮动 div？
块显示实际上是多余的，因为它们是 div，我相信。不完全确定我理解为什么它仍然以它的方式工作，虽然......

标签： css css-float alignment

【解决方案1】：

编辑
把.item { display: block; }改成.item { display: inline-block; }，去掉.item { float:left; }，把text-align: center;加到.container

你可以在这里看到它：http://jsfiddle.net/JMC_Creative/RQrRb/

如果您希望在两侧留出一些空间，您也可以将.inner div 与width:75%; margin: 0 auto; 放在一起，然后将.items 放在那个中。

【讨论】：

内联块？我什至不知道它的存在......愚蠢的 w3schools。
这不适用于所有浏览器。特别是 IE6 和 IE7 有错误的支持。请参阅下面的答案，了解真正的跨浏览器实现。
另外...关于 w3schools 退房：github.com/paulirish/w3fools/blob/master/index.html 即将发布于：w3fools.com（我认为）

【解决方案2】：

您会想看看来自 Mozilla 的本教程。只需将父容器设置为text-align:center;即可居中对齐

Cross Browser Inline Block

【讨论】：

【解决方案3】：

.container {
width: 100%;
}

.item {
margin: 32px;
text-align: center;
}

【讨论】：

这使得所有.item div 堆叠在一起。那不是他想要的。
在他的代码中 .container 宽度设置为 100% 并且 .item 是块。我以为他希望将 .item div 堆叠起来。