vertical-align

「セル要素の場合」と記述していないキーワードは、セル要素に用いた場合、[baseline]と同じ挙動をします。

baseline

インラインボックスと親ボックスのベースラインをそろえます。ボックスにベースラインが無い場合は、そのボックスの下辺を親ボックスのベースラインにそろえます。
セル要素の場合:セルのベースラインを、そのセルが跨(また)いでいる先頭の行のベースラインにそろえます。このキーワードを使った場合、各行のセルの1行目の行ボックスのベースラインを、その行のセルの中で、1行目の行ボックスのベースラインを最も下に持つセルにそろえます。従って、値に[baseline]を指定したセルを持たない行は、ベースラインを持ちません。

middle

インラインボックスの中心線を、親ボックスのベースラインから、x-heightの半分だけ上の線にそろえます。
セル要素の場合:セルの中心線を、そのセルが跨(また)いでいる行全体の中心線とそろえます。

※分かりやすくする為に適用箇所の字を小さくしていますが、実際は小さくなりません。

sub

インラインボックスのベースラインを、親ボックスの下付き文字として適切な位置まで下げます。(sub要素 と似ていますが、違ってフォントサイズには影響を与えません)

super

インラインボックスのベースラインを、親ボックスの上付き文字として適切な位置まで上げます。(sup要素 と似ていますが、違ってフォントサイズには影響を与えません)

text-top

インラインボックスの内容辺の上辺を、親要素のフォント上辺にそろえます。

※分かりやすくする為に適用箇所の字を小さくしていますが、実際は小さくなりません。

text-bottom

インラインボックスの内容辺の下辺を、親要素のフォント下辺にそろえます。

※分かりやすくする為に適用箇所の字を小さくしていますが、実際は小さくなりません。

<長さ>

指定した長さ分ボックスを上に上げます(正の値)、又は下に下げます(負の値)。 "0cm"などは[baseline]と同じ意味になります。

<パーセンテージ>

このパーセンテージを'line-height'の値に掛け合わせた距離だけ、ボックスを上に上げます(正の値)、又は下に下げます(負の値)。 "0%"は[baseline]と同じ意味になります。

以下の値は、そのボックスが含まれている行ボックスを参照します。

top

ボックスの上辺を、行ボックスの上辺にそろえます。
セル要素の場合:セルボックスの上線を、そのセルが跨(また)いでいる先頭行の上線とそろえます。

※分かりやすくする為にボーダー辺をその要素の行の高さと一致させてあります。

bottom

ボックスの下辺を、行ボックスの下辺にそろえます。
セル要素の場合:セルボックスの下線を、そのセルが跨(また)いでいる最終行の下線とそろえます。

※分かりやすくする為にボーダー辺をその要素の行の高さと一致させてあります。