font-family [フォントを指定する]
  1. TOP
  2. MEMO
  3. CSS Reference
  4. Font
  5. vertical-align

文字の垂直方向の位置を指定する

  • vertical-align ★;
★
キーワード
パーセント
数値指定

このように、super で指定した文字は上にあがります。

逆に、sub で指定した文字は、下にさがります。

テーブル内では、topは上 middleは中央 bottomは下に配置されます。

　この属性は行全体の位置を指定するのではなく、インラインレベル要素とセル要素に対しての縦方向の位置を揃えます。セル要素で baseline を指定すると、セル内で指定した最初の行のベースラインで揃えられます。パーセント指定や数値指定もできますが、対応しているブラウザが少ないので、あまり使われません。

.sample1 {
	vertical-align : super;
}
.sample2 {
	vertical-align : sub;
}
.sample3 {
	vertical-align : top;
}
.sample4 {
	vertical-align : middle;
}
.sample5 {
	vertical-align : bottom;
}

<p>このように、<span class="sample1">super で指定した文字は上にあがります。</span></p>
<p>逆に、<span class="sample2">sub で指定した文字は、下にさがります。</span></p>
<table width="100%" cellpadding="1" cellspacing="1">
<tr>
<td width="33%" height="100" class="sample3">テーブル内では、topは上</td>
<td width="33%" height="100" class="sample4">middleは中央</td>
<td width="33%" height="100" class="sample5">bottomは下に配置されます。</td>
</tr>
</table>
キーワード　一覧
キーワード 内　　　容
baseline ベースライン（Default）
super 上付き
sub 下付き
top 上揃え
middle 中央揃え
bottom 下揃え
text-top テキストの上
text-bottom テキストの下
BACK