2 
<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;，因为这使得图像周围的区域（当它居中时）也可以作为链接点击。我只希望图像可以作为链接点击。

4

2 回答 2

2

也许margin: 0 auto;对你更有效？这取决于您是在页面上定位它还是只是希望它居中。如果您知道元素的宽度，则可以使用它：

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

这将使其居中，因为左右边距是自动的并且宽度已设置。

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

编辑

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

于 2012-04-23T18:22:13.140 回答
1

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

.logo h1 img {
   width:128px;
   margin-left:auto;
   margin-right:auto;
}
于 2012-04-23T18:20:23.207 回答