スタイルシート覚書

vertical-alignプロパティは、指定されたインライン要素が表示される行の中での縦方向の位置を指定します。
このプロパティは行全体の縦のいちそろえを指定するものではなく、指定されたインライン要素を、
その行の中で縦方向のどの位置に配置するかを指定するものです。
なお、このプロパティを th 要素または td 要素に指定した場合には、「top」「middle」「bottom」は
それぞれセル内の｢上」「中心」「下」にそろえられ、
「baseline」を指定した場合にはセル内の最初の行のベースラインが揃えられます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>CSS覚書</title>
<style type="text/css">

</style>
</herd>
<body>
<h1>縦方向の位置を指定する</h1>

<p>
vertical-align:
<img class="vtop" src="http://www5b.biglobe.ne.jp/~donbey/DSCF04021.jpg" width="160" height="120" alt="">
<em>top</em>
</p>
<p>
vertical-align:
<img class="vmid" src="http://www5b.biglobe.ne.jp/~donbey/DSCF04021.jpg" width="160" height="120" alt="">
<em>middle</em>
</p>
<p>
vertical-align:
<img src="http://www5b.biglobe.ne.jp/~donbey/DSCF04021.jpg" width="160" height="120" alt="">
<em class="vbtm">bottom</em>
</p>

<table border="3">
<tr>
<td class="vtop"><em>top</em></td>
<td class="vmid"><em>middle</em></td>
<td class="vbtm"><em>bottom</em></td>
</tr>
</table>

</body>
</html>

[縦方向の位置]
top	上をその行の上に合わせる
middle	中心をその行の「ベースライン＋小文字 X の半分の高さ」に合わせる。
bottom	下をその行の下に合わせる。
baseline	ベースラインをその行のベースラインに合わせる。（初期値）
text-top	上をその行のフォントの上に合わせる。
text-bottom	下をその行のフォントの下に合わせる。
super	ベースラインをその行の上付き文字の位置に合わせる。
sub	ベースラインをその行の下付き文字の位置に合わせる。
単位付きの数値	その行のベースラインを0とした値の＋ー
％	その行のベースラインを0とした行の高さに対する割合。