2010年05月31日

画像の縦方向のセンタリング その2

こんにちは、馬場です。


ものすごく以前(半年前?)になってしまうのですが、
画像の縦方向のセンタリングについてのお話が
途中になっているので、今回はその第2回目、
「displayを使ったセンタリング」のお話をさせていただきます。

「なんのことだか忘れちゃったよ〜。」という方がほとんどだと思いますので、
下記より、前回の記事をご覧いただければと思います。



displayを使ったセンタリング(IE6〜7未対応)


前回の記事で書いているように、
tableであれば
縦方向のセンタリングも全く難なく対応可能です。


ということで、tableと同じ動きになるように
スタイルを設定すれば良いことになります。


下記、サンプルをご確認ください。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.5のものです。

(htmlコーディング)
<div class="wrapper2">
<div><img src="yoko.gif" alt="" /></div>
<div class="none">&nbsp;</div>
<div><img src="tate.gif" alt="" /></div>
</div>
(cssサンプル)
* {
margin:0;
padding:0;
}
.wrapper2 {
margin:10px;
}
.wrapper2 div {
display:table-cell;
width:200px;
height:200px;
border:1px solid #71BED9;
background-color:#DBEDFA;
text-align:center;
vertical-align:middle;
}
.wrapper2 div.none {
width:10px;
border:0;
background-color:transparent;
}
サンプルを表示


サンプルのように
display:table-cell
を設定することで
tableのセルと同じ振る舞いをすることとなるため、
画像の真ん中寄せを実現することができました。


ただ、IE7以前は「table-cell」に対応していないため、
別の対応をする必要があります。

inline-blockと同等の効果を持たせると実現できるようですが、
またの機会に検証したいと思います。
(まだinline-blockについても述べていないので・・・)

次回の私の記事では、
画像の縦方向のセンタリングについて
ダミーイメージとvertical-alignを使ったセンタリング
をご紹介します。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 21:16 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。