div 内で文字を中央に表示させる

今までtable組みでHTMLを書いていた方が、CSSに以降する際に混乱しやすいプロパティ
vertical-align の使い方を紹介したいと思います。

テーブルレイアウトでよく使われる以下のコードを見てください。

<table width="100" height="100">
<tr>
<td valign="middle" align="center">中央に表示</td>
<tr>
</table>

上記のコードをcssレイアウトに変更する際に、CSSの中身を

div#center {
	width: 100px;
	height: 100px;
	text-align: center;
	vertical-align: middle;
}

としてしまいがち。

一見正しいように見えますが、実際の表示を見てみると
左右のセンタリングはされているものの、上下のセンタリングがされていません。

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

じゃあセンタリングはどうすればいいの？という解決策を一つ。

div#center {
	width: 100px;
	height: 100px;
	text-align:center;
	line-height:100px;
}

line-heightでボックス要素の高さと同じ値を与えれば良いのです。
が、この方法は、2行以上の文章には利用できないのでご注意ください。
2行以上の文章用はまた別の機会に紹介したいと思います。

Comments

1. Posted by デコログ   2011/11/09 19:16

人気急上昇のデコログで自分を飾り付け！女の子に大人気のブログサービス

2. Posted by にゃんち@管理人   2011/11/11 11:35

ブログのデザインはいかにも女の子！ってカンジですが・・・
実際の管理人は女の子とは程遠いんデス・・・残念！ （;´▽｀A``