投稿日：2014年10月29日

htmlでレイアウトを作成していると簡単そうなことでちょくちょく躓いてます。

ブラウザによって出力される画面に違いがあって、レイアウトが崩れたり、文字の位置が思った位置に表示できなかったり・・・

最近悩まされていたのはdiv内で文字を中央に表示させる方法です。

< div   style="text-align:center" > テキスト < /div >

で横は中央に表示できますが、縦が中央にできません。表示すると下のようになります。(分かりやすくする為に、div内のサイズを200×100px、背景色を付けています)

table内だとvertical-alignを使えば縦軸を上(top)、中心(middle)、下(bottom)に表示させれますが、divだと変わらない様子。

< div   style="vertical-align:middle" > テキスト < /div >

divで縦軸を合わせる方法を探していて見つけた方法ですがline-heightを使えば1行のテキストなら中心に表示させれそうです。(少々強引ですが・・・)
line-height:ピクセルは1行の高さを指定できるので、高さ200pxのdivならline-height:100pxと指定すれば中心に表示してくれます。

< div   style="line-height:100px" > テキスト < /div >

ひとまずこれらを複合させる事で、中心に表示させる事ができます。

< div   style="line-height:100px"   text-align:center > テキスト < /div >

この方法は無理矢理ですし、使える状況が限られているので、別の正しい方法があると思いますので、また調べておきたいと思います。