0

コードのどこがめちゃくちゃなのかわかりませんが、コードを中央に配置しようとしています。これが私がこれまでに持っているものです：

私が直面している問題は、ページが実際には中央に配置されないことです。ロードすると、左マージンはわずか 10px です。どこかで競合が発生していると確信しています。または、何かを中断しただけで、何時間も検索しましたが、何も見つかりませんでした。次のコードは次のとおりです。

body {
background-color: #12121D;
}   

#contain {
display: block;
width: 1000px;
margin: 0 auto;
}

.version{
text-align:right;
font-family: Calibri, sans-serif, serif;
text-decoration:none;
color:#00F;
}

#header {
width: 1000px;
height: 230px;
    }

#logo {
width: 600px;
margin: 50px 0px 0px 10px;
padding: 0px;
float: left;
position: absolute;
  }

#banner {
text-align: right;
float: right;
z-index: -1;
    }

#menu {
height: 80px;
margin: 0 auto;
}

#main {
height: 500px;
width: 850px;
margin-left: 75px;
/*position: absolute;*/
z-index: 4;
/*float: left*/;
  }

#content {
width: 850px;
height: 500px;
float: left;
margin-left: 0px;
     }

また、html は次のようになります。

<body>
<div id="contain">
    <div id="header">
        <div id="logo"> <img src="images/logo.png" alt="logo" />
        <br />
        <a class="version" href="JavaScript:changeSheets(1)">View       Mobile<a/>
        </div>
        <div id="banner"><img src="images/banner.png" alt="banner"/></div>
    </div>
<div id="menu">
    <div class="pages">
    <ul>
        <li><a href="index.html">Front Page</a></li>
        <li><a href="reviews.html">Reviews</a></li>
        <li><a href="releases.html">Releases</a></li>
        <li><a href="author.html">About Me</a></li>
        <li><a href="contact.html">Contact Info</a></li>
    </ul>
    </div>
</div>
<div id="main">
    <div id="content">
        <div class="why" id="whyBackground"> <img src="images/reviewsites.png" alt="reviewsites"/>
            <h1>Why am I doing this?</h1>
            <br />
            Insert text here
            <h1>What is my goal?</h1>
            Insert text here
        </div>
    </div>
</div>
</div>
</body>
4

3 に答える 3

0

こんにちは、あなたのコードです:

http://jsfiddle.net/w9Zgc/2/

私の画面では、1920px の大きなページが中央に配置されています。画面解像度が幅 1024px に近いと思うので、左余白が 10px に等しいのはかなり合理的です。別のアドバイスは、ボディのパディングとマージンをリセットすることです

body, html {
    padding:0;
    margin: 0;
}
于 2013-04-24T17:23:20.683 に答える
-1

http://jsbin.com/itiwez/2/editのリンクから判断すると

CSSを削除@charset "utf-8"したところ、すぐに機能しました (少なくとも jsbin デモでは)。CSS ファイルは実際に UTF-8 形式ですか?

参考までに: @charset "UTF-8" を指定する理由。あなたのCSSファイルで？

于 2013-04-24T19:09:49.263 に答える
-1

div を中央に配置するのに役立つことの 1 つは、幅を指定してから、左右のマージンを auto に設定することです。

#main{
   width: 850px;
   margin-left: auto;
   margin-right: auto;
}
于 2013-04-24T17:21:36.370 に答える