TEXT : vertical-align



記述形式 vertical-align : キーワード | percentage ;
適用 inline elements
使用方法 ベースラインを基準にテキストの配置(縦方向)を指定する。

キーワードには以下の8種類を指定できます。
baseline : デフォルト
sub : 下付き文字(対 テキスト)
super : 上付き文字(対 テキスト)
text-top : 対象要素の top-line に揃える
text-bottom : 対象要素の bottom-line に揃える
middle : 対象要素の middle-line に揃える
top : その行の一番高い要素の top-line に揃える
bottom : その行の一番低い要素の bottom-line に揃える
percentage : 自分自身の文字高さ100%としてベースラインを上下させる
実行例 normal text / <SPAN STYLE="vertical-align:sub">sample text</SPAN>
normal text / sample text

normal text / <SPAN STYLE="vertical-align:super">sample text</SPAN>
normal text / sample text

normal text /<SPAN STYLE="vertical-align:baseline">sample text</SPAN>
normal text /sample text

normal text /<SPAN STYLE="vertical-align:text-top">sample text</SPAN>
normal text /sample text

normal text /<SPAN STYLE="vertical-align:text-bottom">sample text</SPAN>
normal text /sample text

normal text /<SPAN STYLE="vertical-align:middle">sample text</SPAN>
normal text /sample text

normal text /<SPAN STYLE="vertical-align:top">sample text</SPAN>
normal text /sample text

normal text /<SPAN STYLE="vertical-align:bottom">sample text</SPAN>
normal text /sample text

normal text /<SPAN STYLE="vertical-align:150%">sample text</SPAN>
normal text /sample text

※ 認識しやすいように、sub と super 以外は font-size:x-large で表示しています。
サポート
ブラウザ
OSpropertyIE3.xIE4.xIE5.0xIE5.5xNN4.xNN6.x
Winbaseline××
sub××
super××
text-top××××
text-bottom××××
middle××××
top××××
bottom×××××
percentage×××××
Macbaseline--×
sub--×
super--×
text-top--×
text-bottom-×-×
middle--×
top--×
bottom-×-×
percentage-×-×
Unixbaseline----×
sub----×
super----×
text-top----×
text-bottom----×
middle----×
top----×
bottom----×
percentage----×
Mac 版 IE5.x でパーセンテージ指定をすると、レイアウトが大幅に崩れます。