vertical-align
解説
テキストや画像等の縦方向の揃え位置を指定します。実際には行ボックス内におけるインラインボックスの縦位置をどうそろえるかの指定となります。
| baseline | ベースラインを揃える（初期値） |
|---|---|
| top | 上端揃え |
| middle | 中央揃え |
| bottom | 下端揃え |
| text-top | テキストの上端に揃える |
| text-bottom | テキストの下端に揃える |
| super | 上付き文字として揃える |
| sub | 下付き文字として揃える |
| 数値 | 数値に px em ex 等の単位をつけて指定（-OK） |
| ％値 | line-heightプロパティの値に対する割合を％値で指定（-OK） |
プロパティ情報
| 値： | baseline,top,middle,bottom,text-top,text-bottom,super,sub,長さ,パーセンテージのいずれか |
|---|---|
| 初期値： | baselie（セル要素の初期値はmiddle） |
| 適用対象： | インライン要素、セル要素 |
| 継承： | しない |
| パーセンテージ： | line-heightの値に対する割合 |
| 適用メディア： | 視覚 |
| レベル： | 1〜2 |
参照
text-align text-decoration text-underline-position text-indent text-autospace text-transform text-justify line-height line-break word-spacing word-break word-wrap vertical-align letter-spacing white-space
使用例
ソース
CSSの記述方法はスタイルシートってなに？も参照下さい。 <p><img src="../img/smp.gif" alt="baseline" style="vertical-align: baseline">baseline</p> <p><img src="../img/smp.gif" alt="top" style="vertical-align: top">top</p> <p><img src="../img/smp.gif" alt="middle" style="vertical-align: middle">middle</p> <p><img src="../img/smp.gif" alt="bottom" style="vertical-align: bottom">bottom</p> <p><img src="../img/smp.gif" alt="text-top" style="vertical-align: text-top">text-top</p> <p><img src="../img/smp.gif" alt="text-bottom" style="vertical-align: text-bottom">text-bottom</p> <p><img src="../img/smp.gif" alt="super" style="vertical-align: super">super</p> <p><img src="../img/smp.gif" alt="sub" style="vertical-align: sub">sub</p>
表示結果
baseline
top
middle
bottom
text-top
text-bottom
super
sub
