vertical-alignの説明

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

vertical-alignは正しく理解していないと使いにくいプロパティである。
特にtableレイアウトからcssレイアウトに移行する際に混乱が発生しがちだ。

テーブルレイアウトでよく使う以下のようなコードがある。

<table width="200" height="200" bgcolor="#39FF6B">
	<tr>
		<td valign="middle" align="center">中央に表示したい文字</td>
	<tr>
</table>

サンプル

このコードをcssレイアウトに変更する際に

HTMLを

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

CSSを

div{
	width:200px;
	height:200px;
	background:#39FF6B;
	text-align:center;
	vertical-align:middle;
}

としてしまいがちだがこれでは正しく動作しない。
サンプル

これはvertical-alignがボックスレベル要素ではなく、テーブルセルの縦方向の揃え位置を指定する事ができるプロパティだからです。

垂直中央表示を行う場合はline-heightプロパティを使用します。

div{
	width:200px;
	height:200px;
	background:#39FF6B;
	text-align:center;
}
p{
	line-height:200px;
}

サンプル

2行以上の文などには利用できないが、有用な方法です

2行以上の文などで垂直中央を実装を実装したい場合はCSSで垂直中央を実装するを参考にしてください。

おまけ

vertical-alignはテーブルセルに対して有効なのだが、そもそもテーブルセルとは何かというとtd要素やth要素のことである。

td要素やth要素のdislayプロパティはtable-cellになります。

つまり、ブロックレベル要素でもdislayにtable-cellを指定すればvertical-alignが利用可能になります。

div{
	display:table-cell;
	width:200px;
	height:200px;
	background:#39FF6B;
	text-align:center;
	vertical-align:middle;
}

サンプル

でも例のごとくIEでは動作しませんのであしからず・・・

スポンサードリンク