边距：0 自动；不居中内容答案

【问题标题】：margin: 0 auto; not centering content边距：0 自动；不居中内容
【发布时间】：2012-05-20 13:50:34
【问题描述】：

我正在处理网页，我设置了 div 标签的宽度，并且正在使用 margin: 0 auto;但我的内容仍然在左边。我正在使用 OS X 10.7.3、Chrome 19.0.1084.46 和 Dreamweaver CS6

这是我的 CSS：

@charset "UTF-8";
body {
    text-align: center;

    display: block;
}
.container {
    float: left;
    height: 2000px;
    width: 964px;
    margin: 0 auto;
    text-align: left;
}
.header {
    float: left;
    height: 117px;
    width: 964px;
}
.leftcol {
    float: left;
    height: 1715px;
    width: 534px;
    margin-top: 20px;
margin-right: 10.125px;
    margin-bottom: 20px;
    margin-left: 30px;
}    
.navbar {
    float: left;
    height: 69px;
    width: 964px;
}
.rightcol {
    float: left;
    height: 1715px;
width: 306px;
    margin-top: 20px;
    margin-bottom: 0px;
    margin-left: 20.25px;
}
.video {
    float: left;
    height: 301px;
    width: 534px;
}
.pagebody {
    float: left;
    height: 1749px;
    width: 920px;
    background-color: #FFF;
    margin-top: 0px;
    margin-bottom: 21.25px;
    margin-left: 22px;
}

以及使用 CSS 的 HTML：

<body>
<div class="container">
  <div class="header"><img src="Images/Top.png" width="964" height="117" alt="Intelligentlemen Films" /></div>
  <div class="navbar"><img src="Images/RibbonMenu.png" width="964" height="69" alt="Navbar" /></div>
  <div class="pagebody">
    <div class="leftcol">
        <div class="video"><iframe width="534" height="301" src="http://www.youtube.com/embed/kMBEuol6aUc" frameborder="0" allowfullscreen></iframe></div>
     </div>
     <div class="rightcol"><img src="Images/intelligentlemen button.jpg" width="300" height="61" alt="Intelligentlemen" /></div>
    </div>
   </div>
 </body>
</html>

【问题讨论】：

标签： css html web margin

【解决方案1】：

首先，您不能向左浮动和自动水平边距。反正有什么意义。你想让你的容器居中，而不是推到左侧。现在这可能会给您带来麻烦，因为事情并没有按您希望的那样进行，因为您那里的所有其他元素都浮动到左侧。

像标题和导航栏这样的元素甚至不应该被浮动，即使你不浮动它们也很好，它们只需要被清除。你需要阅读。

底线。当你漂浮时，你需要在完成后清除你的漂浮物。

这是您的阅读材料：如果这是您唯一要做的事情，请至少阅读 The Great Collapse on CSS Tricks，但我建议通读它（并搜索更多内容，直到它坚持下去）

http://css-tricks.com/all-about-floats/
http://www.alistapart.com/articles/css-floats-101/
http://www.positioniseverything.net/easyclearing.html

了解浮点数非常重要。

附言不要在容器上定义高度，你希望它灵活，不是吗？我知道您再次定义了高度，因为您不完全了解 CSS 浮动。这就是你需要阅读的原因:)

祝你好运:)

【讨论】：

感谢您的信息和阅读！这是我第一次做任何真正的网络编程，那里的大部分信息都没有帮助，但你链接的那些文章似乎很有用。
那么欢迎来到 Stack Overflow :)。 p.s.现在您单击我的帖子旁边的复选标记，将问题标记为已回答^_^ 这样您就可以为自己建立一个“问题批准率”，并且我可以从我的个人资料中另一个已回答的问题中受益:)

【解决方案2】：

因为你也申请了float: left;。

您还应该以 doctype 声明开始您的源，例如 <!doctype html> 和 ensure your HTML is valid，如 well as your CSS。

【讨论】：

我有，但是因为不适用所以我把它拿出来了。