0

divウィンドウの中央に配置したいラッパーがあります。これを実現するために、次の CSS を使用しました。

#wrapper {
    width: 960px;
    margin-left: -480px;
    position: absolute;
    left: 50%;
}

唯一の問題は、ブラウジング ウィンドウのサイズを変更すると、ウィンドウの中間点から何も見えなくなることです。これはマイナスマージンが原因であることはわかっていますが、これを修正する方法はありますか?

他の s の上にフロートしようとしているdivため、自動マージン トリックは機能しません。

私が持っているもののリンクは次のとおりです：dev.connectionsquad.com。

4

2 に答える 2

0

次のように、コードを書き直して標準に準拠させることをお勧めします。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 600px;
}
body {
    background: #222;
    text-align: center
}
#content {
    text-align: left;
    display: inline-block;
    position: absolute;
    width: 40%;
    min-width: 300px;
    height: 50%;
    min-height: 400px;
    top: 10%;
    margin-left: -20%;
    padding: 25px;
    background-color: #ccc;
    background-image: url('/img/noise.png');
    border: 5px solid #000
}
#background {
    position: absolute;
    width: 100%;
    height: 250px;
    top: 50%;
    margin-top: -125px;
    z-index: -1;
    background-color: #666;
    background-image: url('/img/placeholder.png');
    border-top: 5px solid #eee;
    border-bottom: 5px solid #eee;
}
a:active, a:visited {
    color: #075f76
}
    </style>
</head>
<body>
    <div id="content">
        <h1>Test</h1>
    </div>
    <div id="background"></div>
</body>
</html>

HTML5 - MDNを参照してください。

于 2012-07-23T02:44:16.613 に答える
0

ページの中央にある div については、次のことをお勧めします。 body { text-align: center; } #wrapper { width: 1080px; margin: 0px auto; text-align: left; }

一部のブラウザーでは、body タグで text-align: center を使用して、div をページの中央に配置する必要があります。

于 2012-07-23T00:53:05.240 に答える