0

我有一个 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;
 }

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

4

2 回答 2

4

图像默认是内联的，所以他们不会立即尊重这一点margin: auto。你可以做的（没有额外的 div）是给text-align: center#header。

辅助 div 起作用的原因是因为您将图像包装在具有相同尺寸的 div 中，并且作为块元素，div 将尊重边距自动和中心本身。

于 2013-10-05T16:17:29.217 回答
0

这篇文章可能会给你一些帮助

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

于 2013-10-05T16:20:32.330 回答