-1

我有这个 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

问题是它们位于页面中心，但不完全位于页面中心。有谁能够帮助我？

4

2 回答 2

3

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

于 2013-02-15T11:43:27.613 回答
1

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

我所做的唯一更改是：

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

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

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

于 2013-02-15T11:47:46.243 回答