上寄せ・下寄せ・中央

インラインレベル要素とテーブルのセル要素の垂直位置をコントロールする属性です。デフォルトはbaselineです。ベースラインからの垂直位置を、単位付きの数値で指定することができます。プラスの数値は上にずれ、マイナスをつけると下にずれます。

セレクタ名{vertical-align:値;}

<span ID="セレクタ名">テキスト</span>

baseline

デフォルト

super

上付き文字

sub

下付き文字

top

上詰め

middle

中詰め

bottom

下詰め

例1

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>ベースライン・上付き・下付き</title>
<style type="text/css">
<!--
#baseline {vertical-align:baseline;}
#super {vertical-align:super;}
#sub {vertical-align:sub;}
 -->
</style>
</head>
<body>
<span ID="baseline">htmlとstylesheet</span>
<span ID="super">htmlとstylesheet</span>
<span ID="sub">htmlとstylesheet</span>
 </body>
</html>

こうなります

例2

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>上詰め・下詰め・中詰め</title>
<style type="text/css">
<!--
#top {vertical-align:top;}
#middle {vertical-align:middle;}
#bottom {vertical-align:bottom;}
 -->
</style>
</head>
<body>
<table border="1" height="150">
<tr>
<td>上詰め</td>
<td>中詰め</td>
<td>下詰め</td>
</tr>
<tr>
<td class="top">top</td>
<td class="middle">middle</td>
<td class="bottom">bottom</td>
 </tr>
</table>
</body>
</html>

こうなります