vertical-align

vertical-align は CSS のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。

vertical-align は、2 つの場面で使用することができます。

  • 行ボックスの中でインライン要素の縦方向の整列方法を決める場合。例えば、テキストの行の中で <img> の縦方向の位置を決めるために使います。

  • 表内のセルの内容を垂直方向に整列する場合

vertical-align はインライン要素、インラインブロック要素、表セル要素だけに適用できることに注意してください。つまり、ブロックレベル要素の縦方向の整列には使えないのです。

構文

/* キーワード値 */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> 値 */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> 値 */
vertical-align: 20%;

/* グローバル値 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

vertical-align プロパティは、以下の値のうち一つで指定します。

インライン要素用の値

親要素との相対値

以下の値は、親要素に対しての縦方向の整列方法を表します。

baseline
要素のベースラインを親要素のベースラインに揃えます。 <textarea> のような、一部の 置換要素 のベースラインは HTML 仕様で未定義であり、このため、このキーワードの挙動はブラウザにより異なるかもしれません。
sub
要素のベースラインを親要素の subscript-baseline に揃えます。
super
要素のベースラインを親要素の superscript-baseline に揃えます。
text-top
要素の上端を親要素のフォントの上端に揃えます。
text-bottom
要素の下端を親要素のフォントの下端に揃えます。
middle
要素の中央を親要素の baseline + x-height の半分 に揃えます。
<length>
要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。
<percentage>
<length> 値と似ていますが、line-height プロパティに対するパーセンテージで指定します。負の値を使えます。

行との相対値

以下の値は、親要素ではなく、行全体に対しての縦方向の整列方法を表します。

top
要素と子孫要素の上端を行全体の上端に揃えます。
bottom
要素と子孫要素の下端を行全体の下端に揃えます。

ベースラインを持たない要素では、代わりにマージン境界の下端が使われます。

表セル用の値

baseline (および sub, super, text-top, text-bottom, <length>, <percentage>)
セルのベースラインを、行内でベースライン揃えにされた他のすべてのセルのベースラインに揃えます。
top
セルの上端のパディング境界を行の上端に揃えます。
middle
セルのパディングボックスが行の中央になるようにします。
bottom
セルの下端のパディング境界を行の下端に揃えます。

負の値を使用することができます。

公式定義

初期値baseline
適用対象インラインレベルおよびテーブルセル要素。 ::first-letterおよび::first-line にも適用されます。
継承なし
パーセント値要素自身の line-height に対する相対値
計算値パーセンテージか長さを指定すると絶対的な値、それ以外は指定されたキーワード
アニメーションの種類length

形式文法

baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

例

基本的な例

HTML

<div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div>
<div>An <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div>
<div>An <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div>
<div>An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>

CSS

img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }

Result

仕様書

仕様書 状態 備考
CSS Level 2 (Revision 1)
vertical-align の定義		 勧告 <length> 値を追加し、 display が table-cell である要素で使えるようにした。
CSS Level 1
vertical-align の定義		 勧告 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報