vertical-alignの使い方【css tips】

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で親ボックスレベル要素と同じ値を与えれば中央表示が可能である(2007/2/7追記)

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

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

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

vertical-alignはテーブルセルに対して有効なわけだが、そもそもテーブルセルとは何かというとtd要素やth要素のことで、この要素のdislayプロパティはtable-cellになります。

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

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

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

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー