html - 居中对齐具有浮动的div：左

Question

我有 3 个图像都在同一行并且向左浮动，但我也想将它们居中。我试过使用margin: 0px auto;，但它似乎没有做任何事情。有什么建议么？

CSS：

#boxes .box {
    width:370px;
    height:241px;
    float: left;
    margin: 0px auto;
    background-image:url(../imgs/box_front.png);
    background-repeat:no-repeat;
    background-color: #FFF;

}

Answer 1

将浮动项目居中是不可能的。您可以做的一件事是制作项目inline-block并将text-align: center属性设置为它们的父级。在线示例：http: //jsfiddle.net/8HPWU/

Answer 2

从您的选择器中，我可以看出浮动到左侧的框嵌套在具有 id 的元素内#boxes，因此如果可以，请分配一些固定宽度，#boxes然后使用margin: auto;

#boxes {
   width: 800px; /* You need to set this */
   margin: auto;
}

演示

Answer 3

您应该与您的父 div 对齐，而#boxes不是您的图像。尝试这个：

#boxes{
margin: 0 auto;
text-align: center;
}

Answer 4

添加这个 CSS

#boxes .box {
    width:370px;
    height:241px;
    float: left;
    margin: 0px auto;
    background-image:url(../imgs/box_front.png);
    background-repeat:no-repeat;
    background-position:center center;
    background-color: #FFF;

}