2009年11月13日

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

こんにちは、馬場です。


ホームページを制作する際に、
例えば、ショップサイトの場合は
取り扱う商品の写真を
サムネイル表示することがあると思います。


写真をサムネイル表示する際に、
写真が正方形の枠で囲まれていて、
その中で、写真がまん中に配置されているのを
見かけることがあると思います。

横方向のセンタリングは難なく対応できますが、
縦方向のセンタリングは少し考えてしまいますよね?


今回から、3回に分けて、
画像の縦方向のセンタリングについて
お話しします。

ただ、IE6に対応しようと思った際に
完全にcssのみで対応することが難しいため、
すっきりしない可能性大です。
(私が知らないだけかも知れませんが・・・)





▼tableタグを使ったセンタリング


恐らく、一番最初に思いつく
(他に対応のしようがない?)
のがtableタグを使用した縦方向のセンタリングだと思います。

スタイルを使用しなくても
属性だけで対応できますので、
説明の必要はないかも知れませんが
確認の意味も込めてサンプルをご覧ください。

▼スクリーンショット

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

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

サンプルのように
text-align:center
vertical-align:middle
を設定することで
簡単に真ん中寄せを実現可能です。


tdはvertical-alignの初期値がmiddleなので、
特に意識しなくても、真ん中に寄ってしまいます。


次回の私の記事では、
画像の縦方向のセンタリングについて
displayを使ったセンタリングをご紹介します。

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

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

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

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