【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;に対応していなので残念ながら希望の表示にはなりません。
コメントを残す