0

3 つの div を中央に配置しましたが、グループ化の中心が 10 ～ 20 ピクセルほどずれています。これはなぜですか、どうすれば修正できますか? Google Chrome を使用しています。

コードは次の とおりです。

または、以下のコードを表示できます:
HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <div id="container">
    <div class="csect"></div>
    <div class="csect"></div>
    <div class="csect"></div>

    </div>
</body>
</html>

CSS:

#container
{
    width: 800px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.csect
{
    display: inline;
    float: left;
    margin-left: 25px;
    margin-right: 25px;
    background-color: #E0E0E0;
    width: 200px;
    height: 200px;

}

前もって感謝します。

4

7 に答える 7

3

まさにあなたが探している答えではありませんが、最も役立つ答えは次のとおりです。

  • この違いがある理由を理解するには、firebug を firefox にインストールしてください。
  • あなたが抱えている問題は、他の誰かがすでに抱えている問題です。車輪を再発明する必要はありません。Twitter Bootstrap または 960.gs で略奪する

今あなたが望む答え：

あなたの #container は 800px です。.csect には 25px + 200px + 25px = 250px があります。250 x 3 = 750 ピクセル。50px がありません:) #container を 750px に変更するか、最初の csect にマージンを追加すると、中央に配置されます。

于 2012-09-04T14:43:57.927 に答える
2

問題はコンテナの幅にあります。

(25*2)+200 = 250

250*3 = 750 なので、右に 50 ピクセルのギャップがあり、左に配置されます。

コンテナwidth: 800px;を変更するだけwidth: 750px;で問題ありません。

于 2012-09-04T14:41:58.533 に答える
2

250px x 3 = 800px コンテナーで 750px。
もちろん、それは中心ではありません。

于 2012-09-04T14:40:22.163 に答える
1

コンテナで使用display: inline-blockしてみるtext-align: center

例http://jsbin.com/ibufoc/1/edit

于 2012-09-04T14:41:40.360 に答える
1

これを試して：

.csect {
    background-color: #E0E0E0;
    display: inline-block;
    height: 200px;
    margin-left: 25px;
    margin-right: 25px;
    width: 200px;
}
于 2012-09-04T14:43:20.923 に答える
1

すべてのブラウザーで同じように見えるように、通常、margin-left の値を div 幅の 1/2 ピクセルに設定します。

于 2012-09-04T14:40:01.800 に答える