CSS 居中边距：0 自动；问题答案

【问题标题】：CSS centering margin:0 auto; issueCSS 居中边距：0 自动；问题
【发布时间】：2013-01-05 03:59:12
【问题描述】：

很抱歉，如果之前有人问过这个问题，但我阅读并没有看到我的错误。我尝试使用 margin:0 auto 将 #wrapper 居中；但什么也没发生...宽度也设置了。

这是 CSS：我希望孔页居中

@charset "utf-8";
body {
    margin-left:0px;
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    padding:0;
    background-color:#000000;
    text-align:center

}
#wrapper {
    width: 901px;
    ***margin: 0 auto;***
}
#header {
    background-image: url(images/banner.jpg);
    background-repeat: no-repeat;
    float: left;
    height: 233px;
    width: 901px;
}
#menu {
    font-family: Arial, Helvetica, sans-serif;
    background-image: url(images/menu.gif);
    background-repeat: no-repeat;
    text-align: center;
    word-spacing: 70px;
    padding-top: 17px;
    float: left;
    height: 33px;
    width: 901px;
}
#main {
    float:left;
    height:auto;
    width:901px;
}
#leftcol {
    float:left;
    height:auto;
    width:300px;
    padding-top:5px;
    padding-right:0px;
    padding-bottom:0px;
    padding-left:30px;
}
#rightcol {
    float:right;
    height:auto;
    width:500px;
    padding-right:35px;
    margin-right:0px;
}
#footer {
    font-family:Arial, Helvetica, sans-serif;
    font-size:x-small;
    float:left;
    height:250px;
    width:900px;
    color:#666666;
    clear:both
}

还有html：

这是基本的html文件

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="wrapper">Content for  id "wrapper" Goes Here</div>
<div id="header">Content for  id "header" Goes Here</div>
<div id="menu">Content for  id "menu" Goes Here</div>
<div id="main">
  <div id="leftcol">Content for  id "main" Goes Here</div>
  <div id="rightcol">Content for  id "rightcol" Goes Here</div>
  <div id="footer">Content for  id "footer" Goes Here</div>
</div>
</body>
</html>

【问题讨论】：

标签： center margin

【解决方案1】：

你需要给 body（你的元素的父元素）一个宽度：

html, body{
    width:100%;
}

此外，考虑到您的标记，如果您希望整个网站居中，您应该使用 #wrapper 作为实际包装器，这意味着它应该包含其他内容节点：

<body>
<div id="wrapper">
    <div id="header">Content for  id "header" Goes Here</div>
    <div id="menu">Content for  id "menu" Goes Here</div>
    <div id="main">
        <div id="leftcol">Content for  id "leftcol" Goes Here</div>
        <div id="rightcol">Content for  id "rightcol" Goes Here</div>
        <div id="footer">Content for  id "footer" Goes Here</div>
    </div>
</div>
</body>

【讨论】：

添加宽度：100%；到正文（#wrapper 的父级）仍然相同。我也知道 IE，但这发生在 Chrome 和 Firefox 中。
谢谢你，我错过了这一点，因为我在 Dreamweaver 中学习教程，而不是编写代码，而是使用 add 函数添加它。非常感谢。