【CSS】大きさの指定が無い要素を真ん中に配置する
よくテーブルを使用してなんとなくできた気になりますが、レイアウトの為にテーブルを使っているようではセマンティッカーの名折れ。
CSSを利用して天地真ん中に配置するテクニックです。
HTML
<div class="wrap_box"> <p class="center_b">オラ真ん中に行きてえ</p> </div>
CSS
.wrap_box {
display: table;
}
.center_b {
display: table-cell;
text-align: center;
vertical-align: middle;
}
デモ
オラ真ん中に行きてえ
display: table;でdivをテーブル化しただけです!
IE7以前はdisplay: table;に対応していなので残念ながら希望の表示にはなりません。

コメントを残す