<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;
編集:画像の周囲の領域(中央に配置されている場合)もリンクとしてクリックできるようになるため、使用したくありません。リンクとして画像をクリックできるようにしたい。