vertical-align:垂直位置

---

垂直位置：

top	上をその行の上に合わせる
middle	中心をその行の「ベースライン＋小文字"ｘ"の半分の高さ」に合わせる
bottom	下をその行の下に合わせる
baseline	ベースラインをその行のベースラインに合わせる　(デフォルト)
super	ベースラインをその行の上付き文字の位置に合わせる
sub	ベースラインをその行の下付き文字の位置に合わせる
単位つきの数値	その行のベースラインを0としたときの＋−
%	その行のベースラインを0とした行の高さに対する割合

vertical-alignプロパティで、文字の垂直位置を指定します。

キーワードとして指定できるものは、top，middle，bottom，baseline，super，subの6種類があります。
デフォルトのbaselineではテキストの下の位置に揃います。
　・　{ vertical-align:top; }
　・　{ vertical-align:baseline; }

単位つきの数値では、1つ上の要素のベースラインを0として、そこからの垂直位置を単位つきの数値で指定します。
プラスの数値で上にずれ、マイナスの数値で下にずれます。
詳しいことは、『単位の指定方法』を御覧ください。
　・　{ vertical-align:1em; }
　・　{ vertical-align:-12pt; }

%では、line-heightプロパティで指定された高さに対するずれの割合をパーセントで指定します。
こちらも、プラスの数値で上にずれ、マイナスの数値で下にずれます。
　・　{ vertical-align:150%; }
　・　{ vertical-align:-200%; }

top

middle

bottom

baseline baseline super sub

<STYLE type="text/css">
<!--
.case1 { vertical-align:top; }
.case2 { vertical-align:middle; }
.case3 { vertical-align:bottom; }
.case4 { vertical-align:baseline; color:blue; }
.case5 { vertical-align:super; color:blue; }
.case6 { vertical-align:sub; color:blue; }
-->
</STYLE>

<TABLE border="1" width="90%">
<TBODY>
<TR>
<TD height="40" class="case1" width="30%">top</TD>
<TD height="40" class="case2" width="30%">middle</TD>
<TD height="40" class="case3" width="30%">bottom</TD>
</TR>
</TBODY>
</TABLE>
<P>
<FONT size="+3">baseline</FONT>
<span class="case4"> baseline</span>
<span class="case5"> super</span>
<span class="case6"> sub</span>
</P>

baseline プラス数値　マイナス数値

<STYLE type="text/css">
<!--
.case7 { vertical-align:8pt; color:red; }
.case8 { vertical-align:-6pt; color:red; }
-->
</STYLE>

<P>
<FONT size="+3">baseline</FONT>
<span class="case7"> プラス数値</span>
<span class="case8">　マイナス数値</span>
</P>

baseline プラス%　マイナス%

<STYLE type="text/css">
<!--
.case9 { vertical-align:120%; color:green; }
.case10 { vertical-align:-150%; color:green; }
-->
</STYLE>

<P>
<FONT size="+3">baseline</FONT>
<SPAN class="case9"> プラス%</SPAN>
<SPAN class="case10">　マイナス%</SPAN>
</P>