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 { position: absolute; top: 0px; left: 10px; width: 200px }

现在出现了问题

如果我的浏览器窗口小于800px，则中心div会覆盖徽标div。如果有滚动条代替它会很好。我该怎么做？

提前致谢！ FREDDI

Answer 1

试试这个（在css中）：

#top_menu { overflow: auto; }

当然，您必须在div标签内添加徽标标记。

Answer 2

这样做，

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

处的工作示例

Answer 3

知道了：

#logo
{
    float: left;
}

和

#top_menu
{
    margin: 20px auto 0;
    height:29px;
    width: 602px;
}

HTML

<div id="logo"><img src="<?=site_url('img/logo.jpg')?>" /></div>

        <div id="top_menu">



            <ul id="top_links">
                <li><a href="<?=site_url()?>">Startseite</a></li>
                <li><a href="<?=site_url('static/impressum')?>">Impressum</a></li>
            </ul>
        </div>

如何将左侧带有徽标的HTML DIV居中？

3 个答案:

检查http://jsfiddle.net/WV8q7/3/