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;thenの中央に配置し、その中に画像とアンカー（<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 に答える