图像不在IE7的中心？

Question

<div class="logo">
    <h1><a href="/"><img src="image.png" alt="Red Rectangle" /></a></h1>
</div>

.logo h1 img{
    position: relative;
    width: 256px;
    left: 50%;
    margin-left: -128px;
    border: none;
}

使用上面的代码，我将图像置于中间位置。但这仅适用于FireFox，Chrome，因为在Internet Explorer 7中，图像看起来不是居中的，而是从中心向右30像素。

IE7中未完全居中的图像（红色）的屏幕截图

有谁知道我如何在IE7中正常工作？

编辑：我不想使用margin: 0 auto;因为这会使图像周围的区域（当它居中时）也可以作为链接点击。我希望仅图片可以作为链接点击。

Answer 1

也许margin: 0 auto;对你有用吗？这取决于您是将它放在页面上还是只想让它居中。如果你知道元素的宽度，你可以使用它：

.logo h1 img {
    width: 256px;
    margin: 0 auto;
    border: none;
}

这会使它居中，因为左边和右边的边距是自动的并且设置了宽度。

jsFiddle：http://jsfiddle.net/thFpF/

---

修改

您应该使用margin: 0 auto;将父元素居中，然后将图像和锚点（<a>链接）放入其中。这样整个区域将无法点击。

Answer 2

如果您知道图像的宽度，最好使用：

.logo h1 img {
   width:128px;
   margin-left:auto;
   margin-right:auto;
}