-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 つの要素が同じ幅を構成していません。を計算すると、それぞれの両側にパディングが2 * 200px追加されます。に変更するとうまくいくようです。または、最初と 2 番目のアイテムの幅を調整して合計を.5px420px#ItemsContainer420px500px

于 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 に答える