vertical-align

table.test tr td { vertical-align: baseline;}
table.test tr td { vertical-align: middle;}
span { vertical-align: super;}
span { vertical-align: text-bottom;}

値	概要
baseline	セルの内包しているコンテンツの1行目のベースラインを、同じ行の一番位置が低いベースラインを持つセルのベースラインに揃えます。この『baseline』が初期値です。
top	セルに内包されているコンテンツの上端を、属している行の上端に揃えます。
middle	セルに内包されているコンテンツの垂直方向の中心を、属している行の垂直方向の中心に揃えます。
bottom	セルに内包されているコンテンツの下端を、属している行の下端に揃えます。
super	この値はテーブルセル要素には反映されず、初期値の『baseline』が指定されたものとして反映されます。
sub	この値はテーブルセル要素には反映されず、初期値の『baseline』が指定されたものとして反映されます。
text-top	この値はテーブルセル要素には反映されず、初期値の『baseline』が指定されたものとして反映されます。
text-bottom	この値はテーブルセル要素には反映されず、初期値の『baseline』が指定されたものとして反映されます。

値	概要
baseline	指定された要素のベースラインを親要素のベースラインに揃えます。この『baseline』が初期値です。
top	指定された要素のインラインボックスの上辺を包含されている行ボックスの上辺に揃えます。
middle	指定された要素のインラインボックスの垂直方向の中心を、親要素から換算した小文字の『x』の半分の高さに揃えます。
bottom	指定された要素のインラインボックスの下辺を包含されている行ボックスの下辺に揃えます。
super	指定された要素のベースラインを親要素の上付き文字の位置まで上げます。
sub	指定された要素のベースラインを親要素の下付き文字の位置まで下げます。
text-top	指定された要素のインラインボックスの上辺を親要素のフォントの上辺へ揃えます。
text-bottom	指定された要素のインラインボックスの下辺を親要素のフォントの下辺へ揃えます。
数値	元々配置される位置から数値で指定した分だけ移動します。正の値は上方向、負の値は下方向です。主に使用される単位は『px』、『em』などです。

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系 標準ブラウザ	Android4系 標準ブラウザ

テーブルセル要素、またはインラインレベル要素の垂直方向の整列位置を指定します。このプロパティは制約や注意点が多いのでご注意ください。

まずこの『vertical-align』プロパティはインラインレベル要素、またはテーブルセル要素にしか反映させることができません。子要素に継承もされませんので親要素に指定するのではなく、インラインレベル要素、またはテーブルセル要素となっている子要素に対して直接指定する必要があります。ただし、th要素、td要素の『vertical-align』の初期値は『inherit』(継承する)となっているため、親のtable要素に指定した『vertical-align』プロパティの値を引き継ぐことができます。

<p style="vertical-align: top; border: solid 1px;"><img style="width: 200px;" src="/dics/dictionary-css/img/sample.jpg"><span>ここはspan要素です。</span></p>

<table style="border: solid 1px red; vertical-align: middle;">
	<tr>
		<td style="height: 200px; border: solid 1px;"><div style="background-color: yellow;">ここはtd要素です。</div></td>
		<td style="height: 200px; border: solid 1px;"><div style="background-color: yellow;">ここはtd要素です。</div></td>
	</tr>
</table>

テーブルセル要素に『vertical-align』プロパティを使用して位置を揃える場合は、その挙動が明確に定義されているのでそこまで複雑にはなりません。以下のように単純に値を指定するだけで位置の変更を反映させることができます。『top』、『bottom』と指定した場合の基準となる大きさは内容コンテンツのボックスで、上、または下のパディングの境界にくっつく形で配置されます。『middle』と指定した場合は行の垂直方向の中心(セルの垂直方向の中心)に内包しているコンテンツの垂直方向の中心を揃えます。

<table style="border: solid 1px red;">
	<tr><td style="vertical-align: top; height: 200px; border: solid 1px;"><div style="background-color: yellow;">ここはテーブルセル要素です。</div></td><td style="vertical-align: top; height: 200px; border: solid 1px;"><div style="background-color: yellow;">ここはテーブルセル要素です。</div></td></tr>
</table>

<table style="border: solid 1px red;">
	<tr><td style="vertical-align: middle; height: 200px; border: solid 1px;"><div style="background-color: yellow;">ここはテーブルセル要素です。</div></td><td style="vertical-align: middle; height: 200px; border: solid 1px;"><div style="background-color: yellow;">ここはテーブルセル要素です。</div></td></tr>
</table>

<table style="border: solid 1px red;">
	<tr><td style="vertical-align: bottom; height: 200px; border: solid 1px;"><div style="background-color: yellow;">ここはテーブルセル要素です。</div></td><td style="vertical-align: bottom; height: 200px; border: solid 1px;"><div style="background-color: yellow;">ここはテーブルセル要素です。</div></td></tr>
</table>

テーブルセル要素に対して、『baseline』と指定した場合には少々注意が必要です。以下のサンプルのように同じ行の中で一番低いベースラインを持つセルのベースラインに他の全てのセルのベースラインが揃えられます。ちなみにベースラインの位置が揃えられるのはセルの内容物の最初の1行目で、2行目以降からは通常の改行時のように行ボックスの大きさにしたがって表示されます。

ベースラインについては以下の図を参考にしてください。日本語にはベースラインが存在しませんが、以下の図のような感じの位置に配置されます。

<table style="border: solid 1px red;">
	<tr><td style="vertical-align: baseline; height: 200px; border: solid 1px;"><div style="background-color: yellow;">table cell</div></td><td style="vertical-align: baseline; height: 200px; border: solid 1px;"><div style="background-color: yellow; font-size: 30px;">table cell</div></td><td style="vertical-align: baseline; height: 100px; border: solid 1px;"><div style="background-color: yellow; font-size: 40px;">table cell xyz</div></td></tr>
	<tr><td style="vertical-align: baseline; height: 200px; border: solid 1px;"><div style="background-color: yellow;">table cell<br>table cell<br>table cell<br>table cell</div></td><td style="vertical-align: baseline; height: 200px; border: solid 1px;"><div style="background-color: yellow; font-size: 40px;">cell xyz</div></td><td style="vertical-align: baseline; height: 100px; border: solid 1px;"><div style="background-color: yellow; font-size: 20px;">table cell<br>table cell<br>table cell<br>table cell</div></td></tr>
</table>

インラインレベル要素の『vertical-align』プロパティに『baseline』と指定した場合は親要素のベースラインに、指定されたインラインレベル要素のベースラインが揃えられます。

<p style="border: solid 1px; font-size: 30px;">baseline xyz<span style="vertical-align: baseline; font-size: 14px;">ここはspan要素です。xyz</span></p>

インラインレベル要素に対して『top』と指定した場合は属している行ボックスの上辺に自身のインラインボックスの上辺がくっつく形で配置され、『bottom』と指定した場合は属している行ボックスの下辺に自身のインラインボックスの下辺がくっつく形で配置されます。

注意点として『line-height』プロパティを使用して行ボックスの高さを調整しようとした場合、『line-height』プロパティは最低となる行ボックスの高さを指定するプロパティのため、期待する大きさより行ボックスが大きくなる場合があります。『vertical-align』プロパティに『top』、または『bottom』と指定する場合は『line-height』プロパティの値だけでなく、行ボックスの状態も確認するようにすると良いでしょう。

<p style="border: solid 1px;"><span style="font-size: 30px;">ここはspan要素です。</span><span style="vertical-align: top; font-size: 14px;">ここはspan要素です。</span></p>

<p style="border: solid 1px;"><span style="font-size: 30px;">ここはspan要素です。</span><img style="vertical-align: top; width: 30px;" src="/dics/dictionary-css/img/sample.jpg"></p>

<p style="border: solid 1px;"><span style="font-size: 30px;">ここはspan要素です。</span><span style="vertical-align: bottom; font-size: 14px;">ここはspan要素です。</span></p>

<p style="border: solid 1px;"><span style="font-size: 30px;">ここはspan要素です。</span><img style="vertical-align: bottom; width: 30px;" src="/dics/dictionary-css/img/sample.jpg"></p>

インラインレベル要素に対して『middle』と指定した場合は親要素から換算した『0.5ex』の高さ(小文字の『x』の半分の高さ)に自身のインラインボックスの垂直方向の中心が揃います。テーブルセル要素に『middle』と指定した場合とインラインレベル要素に『middle』と指定した場合で、揃えられる位置に違いがあるのでご注意ください。その他の注意点として、一部のブラウザでこの『middle』という値がimg要素にしか反映されない場合があります。現行のブラウザではしっかり反映されているようですが古いブラウザの対応をする場合はご注意ください。

<p style="border: solid 1px; font-size: 40px;">x<span style="vertical-align: middle; font-size: 14px;">ここはspan要素です。</span></p>

<p style="border: solid 1px; font-size: 40px;">x<img style="vertical-align: middle; width: 30px;" src="/dics/dictionary-css/img/sample.jpg"></p>

インラインレベル要素に対して『super』と指定した場合には、自身のベースラインが親要素の『上付き文字』の位置に揃えられ、『sub』と指定した場合には自身のベースラインが親要素の『下付き文字』の位置に揃えられます。

『上付き文字』と『下付き文字』については以下を参考にしてください。

<p>テスト<sup>ここが上付き文字です。</sup></p>
<p>累乗を記述するときなどに使われます。</p>
<p>2<sup>100</sup></p>
<p>テスト<sub>ここが下付き文字です。</sub></p>
<p>化学式を記述するときなどに使われます。</p>
<p>H<sub>2</sub>O</p>

<p style="border: solid 1px; font-size: 30px;">baseline xyz<span style="vertical-align: super; font-size: 14px;">ここはspan要素です。xyz</span></p>

<p style="border: solid 1px; font-size: 30px;">baseline xyz<span style="vertical-align: sub; font-size: 14px;">ここはspan要素です。xyz</span></p>

インラインレベル要素に対して『text-top』と指定すると、親要素のフォントの上辺に自身のインラインボックスの上辺がくっつく形で配置され、『text-bottom』と指定すると親要素のフォントの下辺に自身のインラインボックスの下辺がくっつく形で配置されます。注意点として、この時に基準となるのはあくまでも親要素のフォントとなります。ですので、期待する位置に配置されない場合は親要素の直下に適当な文言を記述して位置を確認してみると良いかもしれません。

<p style="border: solid 1px; font-size: 40px;">text-top xyz<span style="vertical-align: text-top; font-size: 14px;">ここはspan要素です。</span></p>

<p style="border: solid 1px; font-size: 40px;">text-top xyz<img style="vertical-align: text-top; width: 30px;" src="/dics/dictionary-css/img/sample.jpg"></p>

<p style="border: solid 1px; font-size: 40px;">text-bottom xyz<span style="vertical-align: text-bottom; font-size: 14px;">ここはspan要素です。</span></p>

<p style="border: solid 1px; font-size: 40px;">text-bottom xyz<img style="vertical-align: text-bottom; width: 30px;" src="/dics/dictionary-css/img/sample.jpg"></p>

インラインレベル要素に対して数値で指定すると、元々その要素が表示されるはずだった位置から指定された数値分だけ上下に移動します。正の値だと上方向、負の値だと下方向で、主に使用される単位は『px』、『em』などです。『%』も使用することができますが、ブラウザによって基準となる大きさに差があったりしますので使用しないほうが良いかもしれません。通常、『%』で指定した場合の基準となる大きさは行ボックスの大きさとなります。尚、テーブルセル要素に対して数値で指定することはできません。

注意点として、インラインレベル要素に対して『vertical-align』プロパティを数値で指定した場合は自身を包含する行ボックスの大きさに影響を与えます。ですので、同じ行に包含されている他の要素に影響を与えてしまう事が多く、非常に使いづらい側面があります。

<p style="border: solid 1px; font-size: 40px;">20px xyz<span style="vertical-align: 20px; font-size: 14px;">ここはspan要素です。</span></p>

<p style="border: solid 1px; font-size: 40px;">1em xyz<img style="vertical-align: 1em; width: 30px;" src="/dics/dictionary-css/img/sample.jpg"></p>

<p style="border: solid 1px; font-size: 40px;">100px xyz<span style="vertical-align: 100px; font-size: 14px;">ここはspan要素です。</span></p>

長くなりましたのでまとめます。インラインレベル要素に対する『vertical-align』プロパティは製作者の期待とかけ離れた挙動を見せるため、なるべく使用を避けたほうが無難です。

『vertical-align』プロパティを使用する目的として圧倒的に多いのは上下中央配置にしたい、といった場合だと思いますので、その際は『display』プロパティに『table-cell』と指定したあと『vertical-align: middle』と指定すると構築が楽です。

<p>以下は『vertical-align: <span style="color: #f00">middle</span>』と『display: <span style="color: #f00">table-cell</span>』の合わせ技で上下中央揃えを構築した一例です。</p>
<p style="vertical-align: middle; border: solid 1px; height: 200px; display: table-cell;"><img style="width: 100px;" src="/dics/dictionary-css/img/sample.jpg"></p>
<p style="vertical-align: middle; border: solid 1px; height: 200px; display: table-cell;">ここはp要素です。 <br>てすとてすと。</p>
<p style="vertical-align: middle; border: solid 1px; height: 200px; display: table-cell;"><img style="width: 150px;" src="/dics/dictionary-css/img/sample.jpg"></p>

このようにCSSだけでの垂直方向の位置揃えは非常に手間がかかることが多いです。各要素の状況によっては期待通りの位置に寄せることができない場合もありますのでご注意ください。