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

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 | 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 Transitions
vertical-align の定義
草案 vertical-align をアニメーション可能として定義。
CSS Level 2 (Revision 1)
vertical-align の定義
勧告 <length> 値を追加し、 displaytable-cell である要素で使えるようにした。
CSS Level 1
vertical-align の定義
勧告 初回定義

初期値baseline
適用対象インラインレベルとテーブルセル要素。 ::first-letter and ::first-line にも適用されます。
継承なし
パーセンテージ要素自身の行の高さ
メディア視覚
計算値パーセンテージか長さを指定すると絶対的な値、それ以外は指定されたキーワード
アニメーションの種類length
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 4Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: mfuji09, sutara79, uknmr, Prinz_Rana, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,