WEBデザインテクニック|KLUTCHE

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です