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行以上の文章用はまた別の機会に紹介したいと思います。

はじめまして！

新米プログラマーのにゃんちと申します。
以後お見知りおきを～ (シ_ _)シ

このブログでは、プログラムをガシガシ書いているときにふと思ったことや、
プログラミングの覚書的なものを日々綴ってゆこうと思ってマス。

プログラミングは独学です。
ですので、『それ間違ってるヨ！』 という記述があれば、どんどんツッコミしてくださると助かりまっす！

あ、ちなみに、得意な言語は Perl です。
PHP と JavaScript は現在奮闘中でございます。

で、記念すべき第一回のブログ更新は、
私が Perl の基礎を覚えるのに大変役に立った書籍の紹介です。

10の構文25の関数で必ずわかるCGIプログラミング

プログラムを書く上で必要なエディタのインストールから、
Perl を記述する上での決まり事やその意味、なぜそうしなくてはいけないのか？
などを、初心者でも分かりやすく説明してくれます。
書いてある内容が非常に分かりやすいため、
『Perl を勉強したいけど何から始めればいいの？』 という方にオススメです！

これ一冊があれば、とりあえず Perl の初歩的な知識は全て補えるんじゃないかナァww