ＣＳＳを使った縦中央横並び
Posted by admin | Filed under css
結構頻度高いのにわすれちゃってめんどくせとか思っちゃうからメモ。
※IE5.5,6,7 firefox3確認済み
まずtableでつくるとこんな感じ
 |
ＧＫ乙！ |
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img title="mario" src="http://sopeo.pocotan.com/wp-content/uploads/2008/10/mario.gif" alt="" width="144" height="192" /></td>
<td>ＧＫ乙！</td>
</tr>
</table>
んで見た目一緒だけどＣＳＳ配置した場合がこれ
ＧＫ乙！
cssの部分
.centerItem {
display: table-cell;
vertical-align: middle;
/*IE用*/
>display: inline;
>zoom: 1;
}
htmlの部分
<div>
<div class="centerItem"><img title="mario" src="http://sopeo.pocotan.com/wp-content/uploads/2008/10/mario.gif" alt="" width="144" height="192" /></div>
<div class="centerItem">ＧＫ乙！</div>
</div>
これだけ。
簡単なのになぜかめんどくさーとかおもっちゃうんだよね。
※IE用の部分は「IEだけにCSSを適応させる方法」の記事を参照してね。
