vertical-alignプロパティは、縦方向の表示位置を指定します。
| 値 (value) | baseline | ベースラインで揃えます。 |
| sub | 修飾対象要素のの表示位置を、下付文字の位置まで下げます。 | |
| super | 修飾対象要素のの表示位置を、上付文字の位置まで上げます。 | |
| top | 表示可能な最上部に揃えます。 | |
| text-top | テキストの上辺を揃えます。 | |
| middle | ベースラインから "x" の半分の高さ分上に揃える。 | |
| bottom | 表示可能な最下部に揃えます。 | |
| text-bottom | テキストの下辺を揃えます。 | |
| ％ | 修飾対象親要素のline-heightから計算します。 | |
| 長さ | 巾や高さの単位参照 | |
| inherit | 親要素からの継承 | |
| 適用要素 | インライン要素とTH/TD要素 | |
| 初期値 | baseline | |
| 継承 | 無し | |
XXXX はスタイルシート記述です。
XXXX はHTML記述です。
XXXX 背景色と枠線は要素の範囲です。
My XXXX
XXXX 部を line-height プロパティで修飾して表示します。
"M" の底辺が、ベースラインです。
My baseline
下付き文字の位置です。
My sub
上付き文字の位置です。
My super
表示可能な最上部に揃えます。
My top My
テキストの上辺を揃えます。
My text-top My
ベースラインから "x" の半分の高さ分上に揃える。
My middle My x
表示可能な最下部に揃えます。
My bottom My
テキストの下辺を揃えます。
My text-bottom My
修飾対象親要素の line-height から計算します。
My 20%
My -20%
修飾対象要素の幅や高さから計算します。
My 1em
My -1em