Question

我不确定我的代码在哪里搞砸了，但我试图让我的代码居中。以下是我到目前为止的情况：

我遇到的问题是页面实际上并不居中。加载时，左边距仅为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>

Answer 1

您好您的代码：

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

在我的屏幕上，较大的1920px页面居中。我认为你的屏幕分辨率接近1024px宽度，因此左边距等于10px是非常合理的。另一个建议是重置填充和身体边缘

body, html {
    padding:0;
    margin: 0;
}

Answer 2

有助于中心div的一件事是指定宽度，然后设置正确的＆amp;左边距为自动：

#main{
   width: 850px;
   margin-left: auto;
   margin-right: auto;
}

Answer 3

根据您在http://jsbin.com/itiwez/2/edit

的链接判断

我在CSS中删除了@charset "utf-8"，它立即起作用（至少在你的jsbin演示中）。你的CSS文件实际上是UTF-8格式吗？

仅供参考：Why specify @charset "UTF-8"; in your CSS file?

CSS页面居中

3 个答案: