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;
}

Demo

Answer 3

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

#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;

}

中心对齐具有浮动的div：left

4 个答案: