vertical-alignの使い方【css tips】

【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。
【PR】HP登録でSEO対策！アクセスアップにコチラ！

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では動作しませんのであしからず・・・

Powered by CSS TIPS

関連エントリー

tableの膨張を防ぐ【css tips】
CSSで垂直中央を実装する【css tips】
CSSで中央表示を実装する【css tips】
floatした際に背景が消える件【css tip】
画面の下部にフッターを表示する

スポンサードリンク

«floatした際に背景が消える件(IE編) | メイン | CSSで垂直中央を実装する【css tips】»

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

IE で最初のサンプルに vertical-align: bottom は効きますか？ その他 (top etc.) も効いていないような気がします。

投稿者:custar | 2007年1月17日 09:50

>custarさん

vertical-align: bottomを適応した物をアップしたので、よろしかったら参考にしてください。

http://web.kankodo.net/sample/css/08/index7.html

投稿者:西畑 | 2007年1月17日 14:47

custar さんが言っているのは、http://web.kankodo.net/sample/css/08/index3.html
のほうではないですか？

vertical-align の指定があってもなくても、middle 相当の位置
に表示されています。

※恐るべしIE。

投稿者:tare | 2007年2月 5日 14:22

>custarさん
>tare さん

やっと理解しました。
反応が鈍くて申し訳わけないです。
vertical-align:middle;
で中央表示してたと思ったら
line-height:200px;
だけでよかったみたいです。

ありがとうございます。
修正させていただきます。

投稿者:西畑 | 2007年2月 7日 01:07
コメントを投稿


画像の中に見える文字を入力してください。