値
次の各値について、リストアイテムのラインボックス内のインライン画像に適用します。各画像のラインボックスには、灰色の点線の境界線があります。各値の画像を揃えるために使用される線は赤です。
ベースラインこれはデフォルト値です。要素のベースラインをラインボックスのベースラインに揃えます。要素にベースラインがない場合は、下マージンのエッジをラインのベースラインに揃えます。
middle要素の垂直方向の中点を、線のベースラインに線のx高さの半分を加えたもの（によって決定される）に位置合わせします。 font）。
これは、vertical-alignで最も一般的に使用される値の1つです。プロパティであり、通常、アイコンとリストマーカーをインラインのテキストに揃えるために使用されます。
sub要素のベースラインを行の添え字の適切な位置に下げます。 （この値は、要素のテキストのフォントサイズには影響しません。）
super要素のベースラインを上付き文字の適切な位置に上げます。 （この値は、要素のテキストのフォントサイズには影響しません。）
text-top要素の上部を行のコンテンツ領域の上部に揃えます。コンテンツ領域の高さは、行内のすべてのフォントの最大のアセンダーとディセンダーに十分な高さであり、配置線はその高さの最上部です。フォントのベースラインの配置によっては、高さが関連するどのフォントサイズよりも大きくなる場合があることに注意してください。
text-bottom要素の下部を下部に揃えます行のコンテンツ領域の。コンテンツ領域の高さは、行内のすべてのフォントの最大のディセンダーとアセンダーに十分な高さであり、配置線はその高さの一番下です。フォントのベースラインの配置によっては、高さが関連するどのフォントサイズよりも大きくなる場合があることに注意してください。
top要素の上部をの上部に揃えます行全体。これは、たとえば複数の画像のように、それぞれが異なる高さの要素が線上にある場合、線の上部は2つの画像の最高値と同じ高さになることを意味します。
行に明示的に設定された
が行の最高のコンテンツよりも高い場合、行ボックスの上部はその高さによって決定されます。
bottom
line-heightが指定されていないため、この例では、行ボックスの下部がフォントの最下位の子孫によって決定されます。したがって、結果は。
要素を行全体の下部に配置します。
行に明示的に設定された
は、行の最低コンテンツよりも低い場合、行ボックスの下部はその高さによって決定されます。
line-heightがあり、画像はその下部に位置合わせされます。
<パーセント>要素をベースラインより上に上げる（パーセント値が正の場合）か、下の要素を下げます指定された量のベースライン（パーセンテージ値が負の場合）。指定された金額は、line-height値のパーセンテージです。値0%は、baselineと同じ意味です。
line-heightは100ピクセルであるため、画像はベースラインから50ピクセル上に持ち上げられます。 < length >要素をベースラインより上に上げる（長さの値が正の場合）か、要素をベースラインより下に下げる（長さの値が負の場合）指定された量だけ。値「0」は、baselineと同じ意味です。
メモ
値top、bottom、およびmiddleは、テーブルセル要素に適用すると期待どおりに動作します。ただし、一部のブラウザでは、他の値が予期しない動作をする場合があります。クリス・コイエはそれを最もよく言います：
テーブルセルで垂直整列を使用する場合、上、下、および中央に固執することが最善の策です。とにかく、他の値はどれもあまり意味がなく、予測できないクロスブラウザの結果をもたらします。たとえば、セルをtext-bottomに設定すると、テキストはIE 6では下に、Safari 4では上に配置されます。subに設定すると、IE 6では中央に配置され、Safari4では上に配置されます。
テーブルセルのデフォルトの垂直方向の配置（<td>）はmiddleです。ただし、display: table-cellを持つブロックレベル要素のデフォルトの垂直方向の配置はtopのままです。これはブロックレベルのデフォルトの配置です。一般的なコンテナ。実例については、以下のデモセクションを参照してください。
