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

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

HTML:

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

或：

您可以使用

float

或

display

属性将它们水平对齐。

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

#容器{
文本对齐：居中；
}
.浮动{
显示：内联块；
文本对齐：左对齐；
宽度：100px；
高度：400px；
背景：绿色；
保证金：5px；
}

---

演示：

float

或

显示：内联块

。没有必要同时使用它们。@RainDiao是的，谢谢你的评论！是的，我知道。好啊我把它换了。@RainDiao当我这样做的时候，它会连接所有的容器。我只需要的宽度是30px和高度；自动的。当我这样做的时候，它会把所有的容器挤压到右边。这就是浮动和显示。@Zevoxa你能做小提琴吗？=>这也有助于我们更容易地了解问题的实质；高度：自动；对不起，我之前说的是300px，不是30px。

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

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