スタイルシート活用術は、ホームページをデザインするスタイルシートのパーツ・素材集＆簡単CSS活用法を紹介しています。

その要素が表示される行の中での縦位置を設定します。

予約語（キーワード）：
baseline
　＝　要素のベースラインを親要素のベースラインに合わせる
top
　＝　要素の上位置を親要素の上位置に合わせる
　＝　<TD>指定した場合は、セルの上位置を横列全体の上位置に合わせる
middle
　＝　要素の中心位置を親要素の小文字"x"の中心に合わせる
　＝　<TD>に指定した場合は、セルの中心を横列全体の中心に合わせる
bottom
　＝　要素の下位置を親要素の下入りに合わせる
　＝　<TD>に指定した場合は、セルの下位置を横列全体の下位置に合わせる
text-top
　＝　要素の上位置を親要素のフォントの上位置に合わせる
text-bottom
　＝　要素の下位置を親要素のフォントの下位置に合わせる
など

デフォルト：baseline＝ベースライン
ベースラインがない場合は下位置を合わせます。

中央に合わせる場合は表の場合は問題ないのですが、それ以外の場合、「親要素の小文字"x"の中心に合わせる」ことになるので、下の例のように表示されます。

（例）

/* 上合わせ */
.top{
font-size : medium;
vertical-align : top;
}
/* 中央合わせ */
.mid{
font-size : medium;
vertical-align : middle;
}
/* 下合わせ */
.bottom{
font-size : medium;
vertical-align : bottom;
}

<!-- HTML -->
段落の中で指定の場合
<P>
　　<IMG src="wallham.gif" width="128" height="128" border="0">
　　<SPAN class="top">↑上合わせ↑</SPAN>
　　<SPAN class="mid">←中央合わせ→</SPAN>
　　<SPAN class="bottom">↓下合わせ↓</SPAN>
</P>
表のセルに指定の場合
<TABLE border="1"><TBODY><TR>
　　<TD><IMG src="wallham.gif" width="128" height="128" border="0"></TD>
　　<TD class="top">↑上合わせ↑</TD>
　　<TD class="mid">←中央合わせ→</TD>
　　<TD class="bottom">↓下合わせ↓<//TD>
</TR></TBODY></TABLE>