html - 为什么 div 居中而不链接？

Question

在下面的 HTML 中，div#entertainment-logo 已居中。这只适用于现在，最初不起作用，因为其中的链接被赋予了相同的 id，但没有 div。为什么会这样？

---

HTML代码

<div id="entertainment-logo">
    <a href="/index.html" width="376px" height="82px">
        <img src="images/hdr-entertainment.gif" alt="CNN Entertainment">
    </a>
</div>

CSS代码

#entertainment-logo {
    margin: 0 auto;
    width: 376px;
}

Answer 1

你的 <div>以 margin: 0 auto; 为中心只是因为它是一个 block 元素。这种对齐不会影响子项的任何对齐。

anchor 是行内元素，因此按父元素的 text-align 对齐。属性:

#entertainment-logo {
    margin: 0 auto;
    width: 376px;
    text-align:center;
}

JSFiddle