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 的一件事是指定宽度，然后将左右边距设置为自动：

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