水平对齐容器？ （最简单的方法？）CSS

Question

水平对齐容器的最佳方法是什么？因为我真的不想创建3个单独的div容器...例如：我基本上只想在我的网页中心水平排列三个盒子/容器。

Answer 1

HTML：

<div class="float"></div>
<div class="float"></div>
<div class="float"></div>

<强> CSS：

.float {
    width:33.33%;
    height:400px;
    float:left;
}

OR：

.float {
    width:33.33%;
    height:400px;
    display:inline-block;
}

Demonstration

您可以使用float或display属性水平对齐它们。

Answer 2

<div class="container">
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
</div>

#container {
    text-align: center;
}

.float {
    display:inline-block;
    text-align: left;

    width:100px;
    height:400px;        
    background:green;
    margin:5px;
}

演示：http://jsfiddle.net/ts9BB/3/