html - 在 body 中居中 float div

Question

我有 3 个 div，它们向左浮动。它们的宽度是 1200，但我的分辨率是 1400。当我的浏览器小于 1200 时，最后一个 div 将到达底部。没关系，但现在我想在我的分辨率优于 1200 宽度时将它们居中。

我不是最擅长 CSS，所以我尝试使用 display: table-cell 但它无济于事。

HTML

<section class="main-items">
    <div class="items-left">
        <dx:ASPxFormLayout ID="ASPxFormLayout1" runat="server">
</div>
    <div class="items-left">
        <dx:ASPxFormLayout ID="ASPxFormLayout2" runat="server">
</div>
    <div class="items-left">
        <dx:ASPxFormLayout ID="ASPxFormLayout3" runat="server">
</div>
</section>

CSS

.main-items {

}
.items-left {
    float: left;
   
}

Answer 1

您可以使用包装器 div 将它们三个居中。

<section class="main-items">
    <div class="items-left">
       <dx:ASPxFormLayout ID="ASPxFormLayout1" runat="server">
    </div>
    <div class="items-left">
        <dx:ASPxFormLayout ID="ASPxFormLayout2" runat="server">
    </div>
    <div class="items-left">
        <dx:ASPxFormLayout ID="ASPxFormLayout3" runat="server">
    </div>
 </section>

在您的 CSS 文件中，插入 CSS 属性

.main-items {
    margin: 0 auto;
    max-width: 1200px;
}

或者您可以通过 CSS 将每个 item-left 元素单独居中，正如 Zougen Moriver 指出的那样。 ;)