CSSで垂直中央を実装する【css tips】

このエントリーをはてなブックマークに追加

vertical-alignの使い方の続きです。

vertical-align:middleでの垂直表示は説明しましたが、あの方法ですと2行以上の場合は利用できないです。

2行以上の場合に垂直中央表示をするにはpositionプロパティを利用します。

(X)HTMLソース

<div>
 <p>中央に表示<br />したい文字</p>
</div>

CSSソース

div{
 width:200px;
 height:200px;
 background:#39FF6B;
 position:relative;
}
p{
 position:absolute;
 top:50%;
 left:50%;
 margin-left:-2.5em;
 margin-top:-1em;

}

サンプル

positionを使いp要素の開始位置を中央に設定します。

その後にmarginを使いp要素の中央とdiv要素の中央が同じ位置になるように変更します。

ポイントとしてはp要素のmargin-leftの-2.5emとmargin-topの-1em

margin-leftには行の最大文字数の半分を-であたえます。(今回の場合は5文字/2)
margin-topには行数の半分を-であたえます。(今回の場合は2行/2)

画像の場合

画像の場合はもっと簡単です。

div{
 width:200px;
 height:200px;
 background:#39FF6B;
 position:relative;
}
p{
 position:absolute;
 top:50%;
 left:50%;
 margin-left:-50px;
 margin-top:-50px;
}

margin-leftは画像の幅の半分を、margin-topには画像の高さの半分を設定します。

サンプル

Powered by CSS TIPS

スポンサードリンク

«vertical-alignの使い方【css tips】 | メイン | CSSで中央表示を実装する【css tips】»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1341
コメントを投稿