Question

我试图将3个盒子放在容器中间。但是，我无法让它发挥作用。

我做错了什么？

HTML

<div id="boxes">
    <div class="box">Box1</div>
    <div class="box">Box2</div>
    <div class="box">Box3</div>
</div>

CSS

#boxes {
    width: 800px;
    background-color: yellow;

    float: left;
}

#boxes .box {
    width: 100px;
    height: 100px;

    margin: 10px;
    float: left;

    background-color: blue;
}

JSFiddle问题：http://jsfiddle.net/3cUF5/

Answer 1

如果您需要跨浏览器解决方案，请使用display: inline-block作为内部框并与父级text-align: center对齐。

示例小提琴：http://jsfiddle.net/RhBEz/1/

<强>的CSS

#boxes {
    width: 800px;
    background-color: yellow;
    float: left;
    text-align: center;
}

#boxes .box {
    display: inline-block;

    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: blue;
}

第二种方法是使用display: flex，但这仅适用于最近的Chrome和Firefox：

示例：http://jsfiddle.net/2mxET/1/

的CSS

#boxes {
    width: 800px;
    background-color: yellow;
    float: left;
    display: flex;
    justify-content:center;
}

#boxes .box {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: blue;
}

Answer 2

在float: left上使用.box表示无法居中。您还需要将text-align: center添加到#boxes

请在此处查看工作版http://jsfiddle.net/s455x/

Answer 3

http://jsfiddle.net/3cUF5/2/

#boxes {
    text-align: center;
}

#boxes .box {
    float: left; /* removed this line */
    display: inline-block;
}

当你试图使元素居中时，使用浮点数并不是一个好主意。在居中元素时有两个基本选项。

对子元素执行display: inline-block;，对父元素执行text-align: center;

或
对要居中的元素进行display: block;，以及margin: 0 auto;

Answer 4

只需添加保证金：0自动;对于#boxes

CSS

#boxes {
    width: 800px;
    background-color: yellow;

    float: left;
    margin-left:auto;
    margin-right:auto;
}

现在你的外部容器#boxes与中心对齐

Answer 5

不确定您尝试支持哪些浏览器，但FlexBox使这非常容易，如果不支持浏览器是必需的，那么您可以提供有效的后备功能。

CSS中的中心框

5 个答案: