Question

我在网页上工作，我设置了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>

Answer 1

因为您还申请了float: left;。

您还应该使用文档类型声明（例如<!doctype html>和ensure your HTML is valid）作为well as your CSS开始使用。

Answer 2

首先，您不能水平向左浮动和自动浮动。无论如何，重点是什么。您希望容器居中，而不是推到左侧。现在这可能给你带来麻烦，因为事情不会像你想要的那样有效，因为你在那里的所有其他元素都浮动到左边。

你的标题和导航栏之类的元素甚至不应该浮动，即使你没有浮动它们也会非常好，它们只需要被清除。你需要做一些阅读。

底线。当你漂浮时，你需要在完成它们之后清除它们。

这是您的阅读材料：如果这是你唯一做的事情，请至少阅读CSS诀窍中的 The Great Collapse ，但我建议通读它（并搜索更多，直到它坚持）

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

花车非常重要，可以理解。

P.S。不要在容器上定义高度，你希望它是灵活的，不是吗？我知道你正在定义高度，因为你不理解CSS完全浮动。这就是你需要阅读的原因:)）

祝你好运：）

保证金：0自动;不以内容为中心

2 个答案: