vertical-alignプロパティは、行ボックス内のインラインボックスやテーブルのセル要素（td要素、th要素）の垂直方向の位置を指定するプロパティです。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

baseline｜sub｜super｜top｜text-top｜middle｜bottom｜text-bottom｜<パーセント>｜<長さ>｜inherit

初期値

baseline

適用される要素

インライン要素、テーブルのセル要素（td要素、th要素）

継承

しません

パーセント値

その要素のline-heightの値に対する割合

メディア

visual

値の解説

baseline

指定したインラインボックスのベースラインと親ボックスのベースラインを揃えます。
ベースラインが存在しない場合は、そのボックスの下辺を親ボックスのベースラインに揃えます。

middle

インラインボックスの中心線を、親ボックスのベースラインから、x-height（小文字のx）の半分（0.5ex分）上げる。

sub

フォントサイズには影響せず、インラインボックスのベースラインを、親ボックスの下付き文字として下げます。

super

フォントサイズには影響せず、インラインボックスのベースラインを、親ボックスの上付き文字として上げます。

text-top

インラインボックスの上辺を、親要素のフォントの上辺に揃えます。

text-bottom

インラインボックスの下辺を、親要素のフォントの下辺に揃えます。

top

インラインボックスの上辺を、行ボックスの上辺に揃えます。

bottom

インラインボックスの下辺を、行ボックスの下辺に揃えます。

<パーセント>

0%の場合はbaselineと同じになり、5%などと指定した場合は、line-heightの値に掛け合わせた距離だけボックスを上げます。マイナスの値を指定した場合は下がります。

<長さ>

0の場合はbaselineと同じになり、指定した長さの分だけボックスを上下します。

これらの値は、テーブルのセル要素（td要素、th要素）に指定した場合若干意味合いが違ってきますが、見た感じではおおよそ意図した通りに表示されます。
詳細を知りたい方は下記リンクを参照してください。

• 17.5.3 Table height algorithms
• 17.5.3 表の高さを計算する（Table height algorithms）

vertical-alignのサンプル 1

p {
  font-size: x-large;
  margin: 20px;
  background: #f0f0f0;
}

p span {
  font-size: x-small;
  margin-left: 5px;
}

p span.baseline {
  vertical-align: baseline;
}

p span.middle {
  vertical-align: middle;
}

p span.sub {
  vertical-align: sub;
}

p span.super {
  vertical-align: super;
}

p span.text-top {
  vertical-align: text-top;
}

p span.text-bottom {
  vertical-align: text-bottom;
}

p span.top {
  vertical-align: top;
}

p span.bottom {
  vertical-align: bottom;
}

p span.percentage {
  vertical-align: 10%;
}

p span.length {
  vertical-align: .5em;
}

<p>Text<span class="baseline">baseline</span></p>
<p>Text<span class="middle">middle</span></p>
<p>Text<span class="sub">sub</span></p>
<p>Text<span class="super">super</span></p>
<p>Text<span class="text-top">text-top</span></p>
<p>Text<span class="text-bottom">text-bottom</span></p>
<p>Text<span class="top">top</span></p>
<p>Text<span class="bottom">bottom</span></p>
<p>Text<span class="percentage">10%</span></p>
<p>Text<span class="length">0.5em</span></p>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

Textbaseline

Textmiddle

Textsub

Textsuper

Texttext-top

Texttext-bottom

Texttop

Textbottom

Text10%

Text0.5em

IE6, 7辺りだと、%指定がずいぶんおかしな場所に表示されているので、%指定はやめておいた方が良さそうです。

vertical-alignのサンプル 2

table {
  margin: 20px;
}

table td.top {
  vertical-align: top;
}

table td.middle {
  vertical-align: middle;
}

table td.bottom {
  vertical-align: bottom;
}

<table>
<tr>
<th><img src="/img/item/ponta.jpg" alt="ぽんた" /></th>
<td class="top">こいつは「ぽんた」って言います。</td>
</tr>
<tr>
<th><img src="/img/item/ponta.jpg" alt="ぽんた" /></th>
<td class="middle">たぬきじゃないけど「ぽんた」なんです。</td>
</tr>
<tr>
<th><img src="/img/item/ponta.jpg" alt="ぽんた" /></th>
<td class="bottom">ボクと10年以上の付き合いです。</td>
</tr>
</table>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

	こいつは「ぽんた」って言います。
	たぬきじゃないけど「ぽんた」なんです。
	ボクと10年以上の付き合いです。