html - 如何在容器中居中放置两个 float 元素？

Question

这让我发疯。我对这些东西比较陌生，所以在过去的一个小时里试图弄清楚这个问题。如果有人可以帮助我，我将非常感激。

我有以下代码:

<div class="middle_box">
     <div class="box left">
          Some large text
     </div>
     <div class="box right">
          Some large text as well
     </div>
</div>

CSS:

.middle_box {
    height: 260px;
    margin: 0 auto;
    width: 960px;
}
.box {
    float: left;
    font-size: 21px;
    margin-right: 50px;
    margin-top: 25px;
    padding-top: 25px;
    width: 390px;
}

正如您所见，容器的宽度为 960 像素。现在，我想将 960px 容器中的两个 .box 元素居中，这就是我迷路的地方。

我尝试了什么？

我尝试使用 margin: 0px auto; 并尝试通过在两侧添加 margin-left 来伪造它，但它没有用。我怎样才能做到这一点？

Answer 1

您需要清除“.middle_box”，因为它的子元素是 float 的。

.middle_box:before, .middle_box:after {
    content: "";
    display: table;
}
.middle_box:after { clear: both; }

应该可以解决问题