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

参照

使用例

ソース

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>

表示結果

baselinebaseline

toptop

middlemiddle

bottombottom

text-toptext-top

text-bottomtext-bottom

supersuper

subsub