CSS – 上下中央揃えについて


CSS-上下中央揃えについて

 

サイト制作していてボックスの上下中央に配置したいとき、すんなりと出来ないことが多々ありますので、調べてみたことを記録。

実際の画面(ソース)確認は http://mizukazu.ever.jp/vertical-center/index.html

テキスト1行のみの場合

POINT height と line-height の値を合わせる。

html

css

 

空の要素を使用した方法。(テキスト複数行・画像可)

POINT 空の span・small 要素などに親の高さを取得させ、display: inline-block; を指定。span要素後改行すると隙間が入る。

html

css

 

position を使用した方法。(画像)

POINT positionを指定し、ボックス左上より50%の位置へ配置。このとき、画像左上が中央位置に来ているので、さらに margin-top: -50px; (画像の半分)を指定。

html

css

 

position+ネガティブマージンを使用した方法。(テキスト複数行)

POINT ポジションでテキスト開始位置をボックス50%位置まで下げ、line-height × 行数 ÷ 2 の分をマイナスすることでテキスト全体行の高さの中央位置へ配置。

html

css

 

display: table; を使用した方法。画像・テキスト可

POINT 外側ボックスへ display:table; 、img を div で囲って display:table-cell; を、併せてvertical-align: middle; で上下中央揃え。

html

css

などなどw

あと画像については background-position で指定する方法もあり。

実際の画面(ソース)確認は http://mizukazu.ever.jp/vertical-center/index.html

 


この投稿へのコメント

コメントはありません。

コメントを残す

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

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL