文字や画像を縦方向に中央寄せする方法をご紹介します。
HTMLをご存知の方は「valign」という属性をすぐに思いつくかもしれません。
CSSにも同じ意味を持つ、vertical-alignというスタイルがあります。
これは「親要素の高さに対して、相対的に中央寄せになる」スタイルなのですが、サポートしているブラウザが少なく、将来に期待するしかありません。
ですが、必要上どうしても実現したい表現の一つだったりします。
というわけで、次の2つを挙げさせていただきます。
1.今のところ一番おすすめなのが、line-heightです。
<p style="line-height: 50px;"> middle? </p>
middle?
但し、IE5.5で表示する際は1点だけご注意を。
文字と画像を同じ段落に入れると、line-heightの高さが無効になります。
NN7.0なら大丈夫です。
2.tdに高さを設定すると、大抵のブラウザは縦方向に中央寄せしてくれます。
<table> <tr> <td style="height: 50px;">middle?</td> </tr> </table>
middle? |
しかし、縦方向に中央寄せしたいだけのためにテーブルを使うのは、冗長なのであまりおすすめしません。
他に良い方法がありましたら、お教えください。お願いします。
コメント (1)
TABLEにHEIGHT指定するの一般的に良くないので透過岐阜で高さ調整する方がベター
投稿者: 番組の途中ですが名無しです | 2006年1月24日 03:16