文字や画像を縦方向に中央寄せする方法をご紹介します。

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>

しかし、縦方向に中央寄せしたいだけのためにテーブルを使うのは、冗長なのであまりおすすめしません。

他に良い方法がありましたら、お教えください。お願いします。