一般的な垂直表示位置

親ボックス(フォントを含んだ)に対するフォントの配置

親ボックス(フォントを含んだ)に対するフォントの配置は、baseline, middle, sub, super, text-top, text-bottom, top, bottomのすべてのキーワードにおいて指定値に揃えられます。
この例において、line-height値は指定していないので%値はデフォルトのline-height値を参照し、長さの相対単位は自身のフォントサイズfont-size:small;を参照し配置されます。

親ボックス(フォントを含んだ)に対する置換要素の配置

親ボックス(フォントを含んだ)に対する置換要素の配置は、baseline, middle, sub, super, text-top, text-bottom, top, bottomのすべてのキーワードにおいて指定値に揃えられます。
この例において、line-height値は指定していないので%値はデフォルトのline-height値を参照し、長さの相対単位は自身のデフォルトのフォントサイズfont-size:small;を参照し配置されます。

*1 sf4 gc2における%値と長さの配置は、他のブラウザに比べ値がかなり大きく取られています。置換要素の配置計算方法が他とは異なるようです。

親ボックス(置換要素を含んだ)に対するフォントの配置

置換要素を含んだ親ボックスは参照元として認識されません。フォントサイズが指定されたボックスが親ボックスとなります。親ボックスに対するフォントの配置は、baseline, middle, sub, super, text-top, text-bottom, top, bottomのすべてのキーワードが指定値に揃えられます。
この例において、line-height値は指定していないので%値はデフォルトのline-height値を参照し、長さは自身のフォントサイズfont-size:small;を参照し配置されます。

親ボックス(フォントを含んだ)に対する%値と長さの配置

<div style="line-height:2em; border:1px #c0c0c0 solid;">Mixdy <span style="vertical-align:100%;">Mixdy</span></div>
<br><br>
<div style="line-height:3em; border:1px #c0c0c0 solid;">Mixdy <span style="vertical-align:-100%;">Mixdy</span></div>
<br><br>
<div style="font-size:x-large; border:1px #c0c0c0 solid;">Mixdy <span style="vertical-align:1em;">Mixdy</span></div>
<br>
<div style="font-size:xx-large; border:1px #c0c0c0 solid;">Mixdy <span style="vertical-align:-1em;">Mixdy</span></div>

%値は、line-height値に対して%値を掛け合わせた分だけインライン要素のベースラインを上げる(正の値)か下げて(負の値)配置されます。
長さの値は、インライン要素のベースラインを指定した長さだけ上げる(正の値)か下げて(負の値)配置されます。長さの相対単位は自身のフォントサイズを参照します。
0%あるいは0という値は、親ボックスのベースラインに揃えられます。

*2 ie7において、%値を指定した際文字が親ボックスからはみ出して表示され、またその文字が消えてしまうというバグがあります。このバグはie8では修正されています。