CSSリファレンス
vertical-alignの意味と使い方
「vertical-align」は指定された要素が表示される行の中での、縦方向の位置を指定します。インライン要素に指定した場合と、セル要素に指定した場合とでは効果が異なります。
値の指定方法
baseline
その要素のボックスのベースラインを親要素のボックスのベースラインに揃えます。セル要素に指定した場合には、セルのベースラインをそのセルが含まれている先頭の行のベースラインに揃えます。
top
その要素のボックスの上を、親要素のボックスの上に揃えます。セル要素に指定した場合には、セルの上線をそのセルが含まれている先頭行の上線に揃えます。
middle
その要素のボックスの中心を親要素のボックスの小文字xの中心に揃えます。セル要素に指定した場合には、セルの中心線を、そのセルが含まれている横列全体の中心線に揃えます。
bottom
その要素のボックスの下を、親要素のボックスの下に揃えます。セル要素に指定した場合には、セルの下線をそのセルが含まれている最後の行の下線に揃えます。
text-top
その要素の上辺を、親要素のフォントの上辺に揃えます。この値はセル要素には適用されず、ベースラインで揃えられます。
text-bottom
その要素の下辺を、親要素のフォントの下辺に揃えます。この値はセル要素には適用されず、ベースラインで揃えられます。
sub
その要素を下付き文字にします。この値はセル要素には適用されず、ベースラインで揃えられます。
super
その要素を上付き文字にします。この値はセル要素には適用されず、ベースラインで揃えられます。
実数値+単位
数値に単位をつけてその要素をどれだけ上げる(負の値の場合は下げる)かを指定します。「0」は「baseline」を指定した場合を同じになります。
パーセント値%
line-heightプロパティの値に対する割合でその要素をどれだけ上げる(負の値の場合は下げる)かを指定します。「0%」は「baseline」を指定した場合と同じになります。