CSS Page Centering

我不知道我的代码在哪里搞砸了，但我试图让我的代码居中。这是我到目前为止：CSS Page Centering

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

来源

2013-04-24 Jake Scarn

它会帮助，如果你有一个工作的jsfiddle – EnigmaRM 2013-04-24 17:10:22

看起来中心对我说：http://jsbin.com/atazaf/1 – bfavaretto 2013-04-24 17:12:52

#contain是1000像素。你目前的浏览器/屏幕尺寸是多少？（我知道，可能是一个愚蠢的问题，但谁知道呢？） – 2013-04-24 17:14:11

-1

一件事，这将有助于您居中一个div是指定宽度，然后设置&左右边距向右汽车：

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

来源

2013-04-24 17:21:36 EnigmaRM

他已经有'保证金：0汽车;'，这应该已经设置左右页边距为'自动' – 2013-04-24 17:28:46

您好是你的代码：

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

在我的屏幕上放大了1920px页面居中。我认为你的屏幕分辨率接近1024px宽度，因此左边距等于10px是相当合理的。另一个建议是在http://jsbin.com/itiwez/2/edit

我删除了你的CSS @charset "utf-8"并立即对工作（至少在你的jsbin演示）重置身体

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

来源

2013-04-24 17:23:20

这是我的整个代码（带编辑）：http://jsbin.com/itiwez/1/edit 如果我采用之前发布的代码，有些人会将其集中。所以它必须是我在这里发布的内容之外添加的内容。任何帮助（和你提供的帮助）将不胜感激。 – 2013-04-24 18:26:08

-1

从你的链接来看的空白和边距。你的CSS文件实际上是UTF-8格式吗？

FYI：Why specify @charset "UTF-8"; in your CSS file?

来源

2013-04-24 19:09:49

好神...... 非常感谢你，我一直在撞墙。 – 2013-04-24 19:12:21

谢谢你自己的努力来提出这个问题。所以我假设我的回答是正确的？ – 2013-04-24 19:13:26

CSS Page Centering

回答

相关问题