无论浏览器窗口大小如何，如何在div中自动将img居中？

Question

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

我已经尝试过，margin-right：auto; 左边距：自动。 我也尝试过这样的技巧：将左边距的负值留给宽度的一半，将顶部的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即可完成？ 希望有人能帮忙，谢谢！

Answer 1

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

您的问题是图像很大。 如果您密切注意，如果您的浏览器窗口的宽度小于图像的宽度，则图像不会居中。

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

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

其他方式：

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

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

我前一阵子在这里学会了这种技巧

Answer 2

只需以应有的大小使用徽标（如此处所示） ，然后您要做的就是将align =“ center”属性添加到徽标的div中。