1

我有一个包含页眉、内容和页脚 div 的 html 文档。我正在尝试将标题 div 中的图像（徽标）居中显示在网页顶部的中间。我可以将它绝对定位到中间，但是当我更改浏览器大小时，img 不会随之移动。我希望它自动放置在窗口的中心。我被难住了..？

我试过了，margin-right:auto; 左边距：自动。我也尝试过让 margin-left 负一半宽度和前 50% 的技巧，但到目前为止没有任何效果。

html:

    <body>
<div id="container">

<div id="header">
    <img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/

CSS：

#header {

    background-color:transparent;
    height:260px;
    width:100%
}


#logo-img{
display: block;
    margin-left: auto;
    margin-right: auto;
}

另外，我什至需要一个容器吗？不确定我是否需要 javascript，或者是否可以仅使用 html/css 来完成？希望有人能帮忙，谢谢！

4

2 回答 2

0

发生的事情是您已经正确地将图像居中。

你的问题是图像很大。如果您仔细观察，如果您的浏览器窗口的宽度变得小于图像，则图像不会居中。

从图像中删除白色区域，它将正确居中。

编辑：在 IE 中，您需要将规则添加text-align:center到#header

其他方式：

如果您不想更改图像，可以使用此 hack：

    <style>
    #header {
        overflow-y: hidden;
        background-color: transparent;
        height: 260px;
        width: 100%;
        margin-left: 50%;
    }


    #logo-img{
        display: block;
        position: relative;
        right: 50%;
    }
    </style>
    <body>
    <div id="container">

    <div id="header">
        <img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
    </div>
    /*...(body div)
    ...(footer div)*/
    </div> /*container*/

我不久前在这里学到了这个技巧

于 2012-11-09T15:54:04.300 回答
0

只需以应有的大小使用徽标（像这里这样），然后您需要做的就是将 align="center" 属性添加到徽标的 div 中。

于 2017-09-11T18:42:44.947 回答