vertical-align（垂直文字揃え）

解説

文字の垂直（縦方向）表示位置を指定する属性です。

値	baseline：ベースライン上に表示 sub：下付き文字（HTMLのsubエレメントと同じ） super：上付き文字（HTMLのsupエレメントと同じ） text-top：上に表示 text-bottom：下に表示 top：上に表示 middle:中央に表示 bottom：下に表示 <percentage> <length>
初期値	baseline
%値の基準	エレメント自身のline-heightを基準
適用	とテーブルセルエレメント
継承	しない

対応状況

baseline

sub

super

text-top

text-bottom

top

middle

bottom

の場合、baseline、text-bottomが正常に動作しません。

の場合、text-top、text-bottomが正常に動作しません。

の場合、text-bottomが正常に動作しません。

使用例

ソース

スタイル部に、

.baseline{vertical-align:baseline;}
.baseline25{vertical-align:baseline;font-size:25pt;}
.sub{vertical-align:sub;}
.super{vertical-align:super;}
.text-top{vertical-align:text-top;}
.text-bottom{vertical-align:text-bottom;}
.top{vertical-align:top;}
.middle{vertical-align:middle;}
.bottom{vertical-align:bottom;}

と記述し、

body部に、

<span class="baseline">baseline</span>
<span class="baseline25">baseline</span>
<span class="sub">sub</span>
<span class="super">super</span>
<table border="1" height="100"><tr>
<td class="baseline">baseline</td>
<td class="baseline25">baseline</td>
<td class="text-top">text-top</td>
<td class="text-bottom">text-bottom</td>
<td class="top">top</td>
<td class="middle">middle</td>
<td class="bottom">bottom</td>
</tr></table>

と記述すると。

表示＆操作

baseline baseline sub super

baseline

text-top

text-bottom

top

middle

bottom

と表示されます。

pokochan@mx1.tees.ne.jp