html - 我如何将带有 Logo 的 HTML DIV 居中放置在左侧？

Question

我想将一个名为#top_menu 的div 居中

<div id="top_menu">This is the menu and it is in the middle of the page</div>

CSS 代码:

#top_menu { margin: 0 auto; width: 600px; ... }

顶部菜单的左侧应该是一个 Logo (#logo)

这是我目前所拥有的:

#logo { position: absolute; top: 0px; left: 10px; width: 200px }

问题来了

如果我有一个小于 800 像素的浏览器窗口，中心 div 会覆盖 Logo div。如果有滚动条就好了。我该怎么做？

提前致谢!弗雷迪

Answer 1

这样做，

#top_menu{
    width:800px;
    margin:0 auto; 
    border:1px solid red;
    display:block;
}

#logo { 
    float:left;
    width: 200px;
    height:50px;
    background:white url(logo.png) no-repeat 0 0
}

现在，当窗口尺寸较小时，您的 div 将不会重叠。

在 http://jsfiddle.net/WV8q7/3/ 查看工作示例