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/

您还可以将.inner div与width:75%; margin: 0 auto;放在一起，然后将.item放入，如果您希望在上留出一些空间两侧。

Answer 2

您需要查看Mozilla的本教程。只需将父容器设置为text-align:center;

即可将其对齐

Cross Browser Inline Block

Answer 3

.container {
width: 100%;
}

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

水平流动物品与容器内的中心对齐

3 个答案: