小粋空間  -  a cheap joke and a play on words site

ドロップシャドウつきの画像をセンタリングする

ドロップシャドウつきの画像をセンタリングする方法を紹介します。

以前紹介した、「CSSで画像に影をつける（ドロップシャドウ）」では、画像のセンタリングを行うことはできません。

本エントリーの設定を行うことで、次のようにセンタリングすることができます。確認ブラウザは Windows XP+ Firefox3.5/IE6/IE7/Opera10/Safari4 です。

１．基本

「CSSで画像に影をつける（ドロップシャドウ）」のマークアップに加え、さらに青色の div 要素を追加します。

<div class="image" style="width:300px">
  <span class="shadow">
    <img alt="coffee" src="http://user-domain/coffee.jpg" width="300" height="199" />
  </span>
</div>

マークアップのキモは、追加した div 要素に、画像と同じ幅の width プロパティを設定することです。

そして、以下のセレクタを追加します（セレクタ名は相応しい名称に適宜変更してください）。

.image {
    margin: 0 auto;
}

２．IE6 以外に対応させる場合

１項の設定ではIE6に対応しません。IE6にも対応させる場合は、１項のマークアップをさらに div 要素で括ります。

<div class="image-ie6">
  <div class="image" style="width:300px">
    <span class="shadow">
      <img alt="coffee" src="http://user-domain/coffee.jpg" width="300" height="199" />
    </span>
  </div>
</div>

そして、以下のセレクタを追加します（セレクタ名は相応しい名称に適宜変更してください）。

.image-ie6 {
    text-align: center;
}