居中图像 - 仅适用于辅助div

Question

我有一个div，我想在其中间添加一个徽标。如果我写：

<div id="header">
    <img id="logo" src="img/logo.png" title="Logo" />
</div>
#logo {
    margin: 0 auto 0 auto;
    width: 278px;
}

什么都没发生。 但如果我为图像制作一个特殊的div，就像这样：

<div id="header">
    <div id = "logo">
        <img src="img/logo.png" title="Logo" />
    </div>
</div>
 #logo {
    margin: 0 auto 0 auto;
    width: 278px;
 }

它有效，图像居中。为什么呢？

Answer 1

默认情况下，图片是内联的，因此他们不会尊重margin: auto。你能做什么（没有额外的div）就是{＃1}}给#header。

辅助div工作的原因是因为你将图像包装在一个具有相同尺寸的div中，并且作为一个块元素，div将尊重margin自动并居中。

Answer 2

this post可能会给你一些帮助

它向您解释为什么需要包装div以及如何在没有div包装的情况下执行此操作（但可能与浏览器兼容的问题）