2010/11/12
div 内で文字を中央に表示させる
今までtable組みでHTMLを書いていた方が、CSSに以降する際に混乱しやすいプロパティ
vertical-align の使い方を紹介したいと思います。
テーブルレイアウトでよく使われる以下のコードを見てください。
一見正しいように見えますが、実際の表示を見てみると
左右のセンタリングはされているものの、上下のセンタリングがされていません。
それは、 『vertical-align』 がボックスレベル要素ではなく、
テーブルセルの縦方向の揃え位置を指定するプロパティだからです。
じゃあセンタリングはどうすればいいの?という解決策を一つ。
が、この方法は、2行以上の文章には利用できないのでご注意ください。
2行以上の文章用はまた別の機会に紹介したいと思います。
vertical-align の使い方を紹介したいと思います。
テーブルレイアウトでよく使われる以下のコードを見てください。
<table width="100" height="100">上記のコードをcssレイアウトに変更する際に、CSSの中身を
<tr>
<td valign="middle" align="center">中央に表示</td>
<tr>
</table>
div#center {としてしまいがち。
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
}
一見正しいように見えますが、実際の表示を見てみると
左右のセンタリングはされているものの、上下のセンタリングがされていません。
それは、 『vertical-align』 がボックスレベル要素ではなく、
テーブルセルの縦方向の揃え位置を指定するプロパティだからです。
じゃあセンタリングはどうすればいいの?という解決策を一つ。
div#center {line-heightでボックス要素の高さと同じ値を与えれば良いのです。
width: 100px;
height: 100px;
text-align:center;
line-height:100px;
}
が、この方法は、2行以上の文章には利用できないのでご注意ください。
2行以上の文章用はまた別の機会に紹介したいと思います。
2010/11/11
はじめまして!
新米プログラマーのにゃんちと申します。
以後お見知りおきを~ (シ_ _)シ
このブログでは、プログラムをガシガシ書いているときにふと思ったことや、
プログラミングの覚書的なものを日々綴ってゆこうと思ってマス。
プログラミングは独学です。
ですので、『それ間違ってるヨ!』 という記述があれば、どんどんツッコミしてくださると助かりまっす!
あ、ちなみに、得意な言語は Perl です。
PHP と JavaScript は現在奮闘中でございます。
で、記念すべき第一回のブログ更新は、
私が Perl の基礎を覚えるのに大変役に立った書籍の紹介です。
10の構文25の関数で必ずわかるCGIプログラミング
プログラムを書く上で必要なエディタのインストールから、
Perl を記述する上での決まり事やその意味、なぜそうしなくてはいけないのか?
などを、初心者でも分かりやすく説明してくれます。
書いてある内容が非常に分かりやすいため、
『Perl を勉強したいけど何から始めればいいの?』 という方にオススメです!
これ一冊があれば、とりあえず Perl の初歩的な知識は全て補えるんじゃないかナァww
以後お見知りおきを~ (シ_ _)シ
このブログでは、プログラムをガシガシ書いているときにふと思ったことや、
プログラミングの覚書的なものを日々綴ってゆこうと思ってマス。
プログラミングは独学です。
ですので、『それ間違ってるヨ!』 という記述があれば、どんどんツッコミしてくださると助かりまっす!
あ、ちなみに、得意な言語は Perl です。
PHP と JavaScript は現在奮闘中でございます。
で、記念すべき第一回のブログ更新は、
私が Perl の基礎を覚えるのに大変役に立った書籍の紹介です。

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