在容器中水平排列具有中心对齐的项目

Question

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

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


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

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

Answer 1

编辑

将.item { display: block; }更改为.item { display: inline-block; }，去掉.item { float:left; }并将text-align: center;添加到.container

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

你也可以在width:75%; margin: 0 auto;中放一个.inner目录，然后把你的.item放进去，如果你想在边上留出一些空间的话。

Answer 2

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

Cross Browser Inline Block

Answer 3

.container {

width: 100%;

}

.item {

margin: 32px;

text-align: center;

}