2010/11/12

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


melody_bar at 17:01|PermalinkComments(2)TrackBack(0) CSS | HTML

2010/11/11

はじめまして!

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

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

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

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

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

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

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

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

melody_bar at 13:37|PermalinkComments(0)TrackBack(0) perl | 参考書籍