垂直中央の実装

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

vertical-alignの使い方でline-heightでの垂直表示は説明しましたが、あの方法ですと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には画像の高さの半分を設定します。

サンプル

スポンサードリンク