2

初心者の質問であることは承知していますが、手を差し伸べて、私が間違っていることを教えていただければ、本当に感謝しています。

HTML と CSS を試していたときに、画面の中央に固定サイズのページを作成することにしました。そのために、[body] タグを相対位置にして配置し、次のように移動することにしました。

position: absolute;
padding: 1em;
width: 960px;
height: 600px;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;

ただし、期待どおりには機能しませんでした。これが私が得ている結果です。

ページから取得したスクリーンショット

黄色のボックスが水平方向と垂直方向の両方で完全に中央に配置されていることを期待していましたが、代わりにわずかに中心からずれていることがわかりました。Safari、Firefox、および Chrome でページを読み込もうとしましたが、同じ結果が得られたので、すでに疑っていたので、それが私のせいだとわかっています :-)

私が何を間違えたのか説明してくれませんか？どうもありがとうございました

これは、私が書いたページの完全な HTML+CSS コードです。

<!DOCTYPE html>
<html>
<head>
    <title>Test 1</title>
    <meta charset="utf-8">
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }
        html {
            background-color: red;
            width: 100%;
            min-height: 100%;
            font-family: Helvetica, Arial, sans-serif;
            font-size: 16px;
        }
        body {
            padding: 1em;
            background-color: yellow;
            width: 960px;
            height: 600px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -480px;
            margin-top: -300px;
        }
    </style>
</head>
<body>
    This is my website
</body>
</html>
4

5 に答える 5

3

それはパディングのせいです。

ボディのパディングを 0 に設定すると、動作します (テスト済み)。

パディングが必要な場合は、ボディ内に 100% 幅の内部 div を追加し、この内部 div にパディングを与えます。

于 2012-07-19T18:03:52.637 に答える
2

margin-leftおよびは、およびに対してそれぞれmargin-top-veの半分の値を持つ必要があります。widthheight

margin-left: /* minus half of width */
margin-top: /* minus half of height */

適切な値を入力する必要があります。

コンテナでは、次を使用して中央に配置することもできます。

margin:0 auto;

すでに指定しているwidth場合

于 2012-07-19T18:04:57.490 に答える
2

数分間それをいじるだけで、これが私が思いついたもので、あなたのニーズに合っているようです:

body {
    padding: 1em;
    background-color: yellow;
    width: 960px;
    height: 600px;
    position: relative;
    margin: 0 auto;
    margin-top: 10%;
}

私がしたことは、margin-left: を削除して、margin: 0 auto; を実行したことだけです。左右を揃えます。次に、margin-top: 10%; を設定します。上下を中央揃えにします。また、ポジショニングを相対に設定しました。これが役立つことを願っています。

于 2012-07-19T20:44:34.383 に答える
2

これを試して：

HTML :

<!DOCTYPE html>
<html>
<head>
    <title>Test 1</title>
    <meta charset="utf-8">
</head>
<body>
    This is my website
</body>
</html>

CSS :

html, body {
    padding: 0;
    margin: 0;
}
html {
    background-color: red;
    width: 100%;
    min-height: 100%;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
}
body {
    padding: 1em;
    background-color: yellow;
    width: 960px;
    height: 600px;
    margin:auto;
    margin-top: -300px;
}

JsFiddle : http://jsfiddle.net/qecwx/

于 2012-07-19T18:04:01.527 に答える