1. 首页
  2. 问答
  3. margin：0 auto;不集中的内容

margin：0 auto;不集中的内容

2012-05-20 49 views
1

我正在一个网页上，我有我的div标签集的宽度，并使用余量：0自动;但我的内容仍然在左侧。我使用的OS X 10.7.3，铬19.0.1084.46，和Dreamweaver CS6margin：0 auto;不集中的内容

这里是我的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; 
}

和HTML使用的CSS：

<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>

来源

2012-05-20 Knoland

回答

4

首先， 不能浮动水平左缘汽车。无论如何，什么是重点。你想让你的容器居中，而不是推到左边。 现在这可能会给你带来麻烦，因为事情不会按照你想要的那样发挥作用，因为你在那里的其他元素会漂浮在左边。

元素，比如你的头和导航栏甚至不应该浮动，他们将是，即使你不把它们飘浮完全正常的，他们只需要被清除。你需要做一些阅读。

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

这里是你的阅读材料： 如果是你，对CSS技巧阅读至少的大崩溃的唯一的事，但我会建议通过它阅读（和寻找更多的，直到它枝）

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

花车是理解非常重要。

p.s.不要在你的容器上定义高度，你希望这是灵活的，不是吗？我知道你正在定义高度，因为你完全不了解CSS浮动。这就是为什么你需要做的阅读:)

好运:)

来源

2012-05-20 05:43:56 Norris

+0

感谢您的信息和阅读！这是我第一次做任何真正的网络编程，并且大部分信息都不太有用，但是你链接的那些文章看起来很有用。 – Knoland

+0

欢迎来到Stack Overflow然后:)。 p.s.现在你点击旁打勾我的职务，以纪念这个问题的回答^ _^ 这样，你建立一个“问题支持率”为你的自我，和我得到的另一个好处回答问题，我的个人资料:) – Norris

相关问题

 相关问题