| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {vertical-align: 値 } |
| 値 の形式 | auto，use-script，baseline，top，central，middle，bottom， text-top，text-bottom，super，sub | 数値 （長さ，%） |
| 初 期 値 | 未定義 |
| 対応ブラウザー | H3+ / e6+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+ |
| 適用可能な要素 | インラインレベル要素，テーブルセル要素 |
| 継 承 | しない |
vertical-alignプロパティ は，<span> や テーブルのセル <td> や <th> などのテキストの縦方向の揃え位置を指定します。 指定できる値は，テーブルのセルとそれ以外では違いがあり、次のようになっています。
| 値 | <td>，<th> での使用 | 説 明 |
|---|---|---|
| auto | ? | 親要素のdominant-baseline と，対応するこの要素の ベースライン で揃えます。 |
| use-script | ? | 親要素とこの要素を scriptプロパティ （未稿） で指定したスクリプトが決定した ベースライン で揃えます 。 |
| baseline | 可 | 要素と親要素を alphabeticベースライン で揃えます。 （初期値）
ただし，alphabeticベースライン をもたないインライン要素では， 置換要素の余白まで含めたボックスの下端と親要素の alphabeticベースライン で揃えます。 |
| super | 不可 | 要素の ベースライン を親要素のテキストの上付き文字の位置まで上げます。 |
| sub | 不可 | 要素の ベースライン を親要素のテキストの下付き文字の位置まで下げます。 |
| top | 可 | 要素と親要素を 要素ボックスの上端（before edge） で揃えます。 |
| text-top | 不可 | 要素と親要素を テキストボックスの上端（text-before-edge） で揃えます。 |
| central | 可 | 要素と親要素を centralベースライン で揃えます。 |
| middle | 可 | 要素と親要素を middleベースライン で揃えます。 |
| text-bottom | 不可 | 要素と親要素を テキストボックスの下端（text-after-edge） で揃えます |
| bottom | 可 | 要素と親要素を 要素ボックスの下端（after edge） で揃えます。 |
| 数値（%） | 可 | 上下への移動幅を行の高さ（line-height の値）を 1 とした百分率（％）で指定します。 |
| 数値（長さ） | 可 | 上下への移動幅を px や em などの単位を付けて指定します。 |
これらの各値の位置関係は少し混乱しやすいのですが，詳しくは以下の例を参照してください。
なお，vertical-alignプロパティ の指定により，alignment-baseline，alignment-adjust， baseline-shift，dominant-baseline の４つのベースラインに関連したプロパティの値が 影響を受け，次の表に示すような値で更新されます。
| vertical-align の値 | プロパティ名 | |||
|---|---|---|---|---|
| alignment-baseline | alignment-adjust | baseline-shift | dominant-baseline | |
| auto | baseline | auto | baseline | auto |
| use-script | use-script | auto | auto | auto |
| baseline | baseline | auto | baseline | alphabetic （親要素や親要素の子孫で別のフローコンテンツがないとき） 以前の値のまま （それ以外） |
| super | baseline | auto | super | auto |
| sub | baseline | auto | sub | auto |
| top | before-edge | auto | baseline | auto |
| text-top | text-before-edge | auto | baseline | auto |
| central | central | auto | baseline | auto |
| middle | middle | auto | baseline | auto |
| bottom | after-edge | auto | baseline | auto |
| text-bottom | text-after-edge | auto | baseline | auto |
| 数値（%） | baseline | 数値（%） | baseline | auto |
| 数値（長さ） | baseline | 数値（長さ） | baseline | auto |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
div.loose { margin:1em auto 0px auto; background-color: #CC99CC; width: 400px; }
.ex1 {font-size: 50px;}
.ex2 {font-size: 25px; background-color: #CCCCFF; }
.valign0 {vertical-align: top; font-size: 12px; background-color: #CCFFFF;}
.valign1 {vertical-align: text-top; font-size: 12px; background-color: #CCFFFF;}
.valign2 {vertical-align: central; font-size: 12px; background-color: #CCFFFF;}
.valign3 {vertical-align: middle; font-size: 12px; background-color: #CCFFFF;}
.valign4 {vertical-align: text-bottom; font-size: 12px; background-color: #CCFFFF;}
.valign5 {vertical-align: bottom; font-size: 12px; background-color: #CCFFFF;}
.valign6 {vertical-align: baseline; font-size: 12px; background-color: #CCFFFF;}
.valign7 {vertical-align: 0.5ex; font-size: 12px; background-color: #CCFFFF;}
.valign8 {vertical-align: super; font-size: 12px; background-color: #CCFFFF;}
.valign9 {vertical-align: sub; font-size: 12px; background-color: #CCFFFF;}
-->
</style> |
| HTML <body> ～ </body> |
<div class="loose"><span class="ex1">上下配置</span> <span class="ex2">Ex.1<span class="valign0">top</span></span></div> <div class="loose"><span class="ex1">上下配置</span> <span class="ex2">Ex.2<span class="valign1">text-top</span></span></div> <div class="loose"><span class="ex1">上下配置</span> <span class="ex2">Ex.3<span class="valign2">central</span></span></div> <div class="loose"><span class="ex1">上下配置</span> <span class="ex2">Ex.4<span class="valign3">middle</span></span></div> <div class="loose"><span class="ex1">上下配置</span> <span class="ex2">Ex.5<span class="valign4">text-bottom</span></span></div> <div class="loose"><span class="ex1">上下配置</span> <span class="ex2">Ex.6<span class="valign5">bottom</span></span></div> <div class="loose"><span class="ex1">上下配置</span> <span class="ex2">Ex.7<span class="valign6">baseline</span></span></div> <div class="loose"><span class="ex1">上下配置</span> <span class="ex2">Ex.8<span class="valign7">+0.5ex</span></span></div> <div class="loose"><span class="ex1">上下配置</span> <span class="ex2">Ex.9<span class="valign8">super</span></span></div> <div class="loose"><span class="ex1">上下配置</span> <span class="ex2">Ex.10<span class="valign9">sub</span></span></div> |
| ブラウザー 表示例 |
|---|
上下配置Ex.1top
上下配置Ex.2text-top
上下配置Ex.3central
上下配置Ex.4middle
上下配置Ex.5text-bottom
上下配置Ex.6bottom
上下配置Ex.7baseline
上下配置Ex.8+0.5ex
上下配置Ex.9super
上下配置Ex.10sub |
テキストの水平方向の揃えを指定するプロパティとして text-align があり，この vertical-align は上下方向の揃え位置を指定します。 しかし，この２つのプロパティは，単純に水平と垂直という役割分担を行っているわけではなく，両者では指定対象や指定に対する効果に大きな違いがあることには，注意が必要です。
たとえば， text-alignプロパティ の方は，<table> 要素や <tr> 要素 に指定して，表（テーブル）全体や表内の１つの行全体のテキストのすべての揃え位置を一括で指定することが可能ですが，vertical-alignプロパティの方は、このような指定方法はできません。（ <table> 要素や <tr> 要素 に対して vertical-alignプロパティの指定はできません。）