css - 水平对齐容器？（最简单的方法？）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;
}

或者：

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

示范

您可以使用floatORdisplay属性水平对齐它们。

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/