为什么项目不在页面中心（边距：自动）[关闭]答案

【问题标题】：Why the items are not in center of the page (margin:auto) [closed]为什么项目不在页面中心（边距：自动）[关闭]
【发布时间】：2013-02-15 19:47:46
【问题描述】：

我有这个 html 代码

<section id="ItemsContainer">
    <div id="FirstItem">
        This is First Item
    </div>
    <div id="SecondItem">
        This is Second Item
    </div>
</section>

这是我的css风格

#FirstItem, #SecondItem {
    text-align: center;
    float: left;
    padding: 5px;
}

    #FirstItem *, #SecondItem * {
        margin-left: auto;
        margin-right: auto;
    }

@media screen and (min-width: 600px) {
    #ItemsContainer {
        margin-left: auto;
        margin-right: auto;
        width: 500px;
        padding: 5px;
    }

    #FirstItem, #SecondItem {
        margin-left: auto;
        margin-right: auto;
        width: 200px;
        text-align: center;
        float: left;
        padding: 5px;
    }
}

这是代码的jsfiddle

问题是它们位于页面中心，但不完全位于页面中心。有人可以帮帮我吗？

【问题讨论】：

#ItemsContainer 宽度 500px，每个 div 内部宽度 200px。将宽度增加到240px 每个子div，它们将居中:)
你需要给#FirstItem, #SecondItem一个宽度

标签： html css margin

【解决方案1】：

您已将 #ItemsContainer 设置为 500px 宽，但其中的两个元素不构成相同的宽度。如果计算2 * 200px，再加上两边的5px 填充，那就是420px。将#ItemsContainer 更改为420px 似乎可以解决问题，或者您可以调整第一个和第二个项目的宽度，使总和为500px。

【讨论】：

【解决方案2】：

我已经更新了你的小提琴：http://jsfiddle.net/ahmadalli/AJUsA/1/

我所做的唯一更改是：

#ItemsContainer {
    width: 500px;
    float: left;
}

#FirstItem, #SecondItem {
    text-align: center;
    float: left;
    padding: 5px;
    width:240px;
}

我在 #ItemsContainer 上添加了浮点数以赋予它高度，但理想情况下，您可能会为此使用 clearfix 类。

【讨论】：