CSS3

プロパティ

vertical-align

→mdn

縦方向の揃え方。

このプロパティは、行内レベルの要素により生成されるボックスに対する、［行ボックスの内側における縦方向の位置決め］に影響する。

以下に定義される各種 値は、親行内要素、および［親ブロック コンテナ要素の支柱］に関してのみ意味を持つ。

以下の定義において、整列に利用されるボックスは、行内ボックスに対しては、縦幅が line-height にされた（ボックスのグリフと各側の半行アキを包含している）ボックスであり、他のすべての要素に対しては、そのマージン ボックスである。

baseline

ボックスの基底線を、親ボックスの基底線に整列する。基底線を持たないボックスに対しては、下端マージン辺を親の基底線に整列する。

<SPAN style="font-size:40px; border:1px solid black;">
開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
 vertical-align:baseline;
">終了</SPAN>

<SPAN style="font-size:40px; border:1px solid black;">
開始<SPAN style="border:1px solid red; font-size:15px;
 vertical-align:baseline;
">あ</SPAN>終了</SPAN>

<SPAN style="font-size:40px; border:1px solid red;
 vertical-align:baseline;
">開始<SPAN style="border:1px solid black; font-size:15px;
">あ</SPAN>終了</SPAN>

<SPAN style="font-size:40px; border:1px solid red;
 vertical-align:baseline;
">A<SPAN style="border:1px solid black; font-size:15px;
">A</SPAN>A</SPAN>

英文字のベースラインのようだ

<TABLE><TR><TD style="font-size:40px; border:1px solid red;
 vertical-align:baseline;
">A<SPAN style="border:1px solid black; font-size:15px;
">A</SPAN>A</TABLE>

sub

ボックスの基底線を、親のボックスの下付き文字に対する適正な位置まで下げる（この値は、要素のテキストのフォント サイズに効果を及ぼすことはない）

<SPAN style="font-size:40px; border:1px solid black;">
開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
 vertical-align:sub;
">終了</SPAN>

super

ボックスの基底線を、親のボックスの上付き文字に対する適正な位置まで上げる（この値は、要素のテキストのフォント サイズに効果を及ぼすことはない）。

<SPAN style="font-size:40px; border:1px solid black;">
開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
 vertical-align:super;
">終了</SPAN>

top

整列済み下位ツリーの上端を、行ボックスの上端に整列する。

値 top、bottom は、要素を行ボックスに相対的に整列する。要素の子は、要素に相対的に整列されることもあるので（したがって子孫も同様になる）、これらの値は、整列済み下位ツリーの限界域を利用する。行内要素の 整列済み下位ツリー は、その要素、および そのすべての子行内要素のうち［vertical-align の算出値が top／bottom でない］ものの整列済み下位ツリーを包含する。整列済み下位ツリーの上端（下端）は、その下位ツリー内のボックスのうち、最も高い上端（下端）である。

<SPAN style="font-size:40px; border:1px solid black;">
開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
 vertical-align:top;
">終了</SPAN>

text-top

ボックスの上端を、親の内容区画の上端（§ 10.6.1 を見よ）に整列する。

<SPAN style="font-size:40px; border:1px solid black;">
開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
 vertical-align:text-top;
">終了</SPAN>

middle

ボックスの縦方向の中点を、親ボックスの基底線から親の x-height の半分だけ上方の所に整列する。

<SPAN style="font-size:40px; border:1px solid black;">
開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
 vertical-align:middle;
">終了</SPAN>

bottom

整列済み下位ツリーの下端を、行ボックスの下端に整列する。

<SPAN style="font-size:40px; border:1px solid black;">
開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
 vertical-align:bottom;
">終了</SPAN>

text-bottom

ボックスの下端を，親の内容区画の下端（§ 10.6.1 を見よ）に整列する。

<SPAN style="font-size:40px; border:1px solid black;">
開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
 vertical-align:text-bottom;
">終了</SPAN>

<percentage> ○

ボックスを、この距離（line-height 値の百分率）だけ上げる（正な値）／下げる（負な値）。値 0% は baseline と同じ意味になる。

<SPAN style="font-size:40px; border:1px solid black;">
開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
 vertical-align:0%;
">終了</SPAN>

<SPAN style="font-size:40px; border:1px solid black;">
開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
 vertical-align:50%;
">終了</SPAN>

<SPAN style="font-size:40px; border:1px solid black;">
開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
 vertical-align:-30%;
">終了</SPAN>

<length> ○

ボックスを、この距離だけ上げる（正な値）／下げる（負な値）。値 0px は baseline と同じ意味になる。

<SPAN style="font-size:40px; border:1px solid black;">
開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
 vertical-align:30px;
">終了</SPAN>

<SPAN style="font-size:40px; border:1px solid black;">
開始<IMG src="Com/Picture_I.gif" style="border:1px solid red;
 vertical-align:-20px;
">終了</SPAN>

inline-table の基底線は、テーブルの最初の row の基底線とする。

行内ブロック B の基底線は、［ B の overflow プロパティの算出値 ＝ visible ］かつ［ B 内にフロー内にある行ボックスはある］ならば、それらの行ボックスのうち最後のものの基底線とする。他の場合は B の下端マージン辺とする。

テスト