vertical-align

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

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

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

<p>
top:<img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
middle:<img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
bottom:<img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
super:<img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
sub:<img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
</p>
<p>
text-top:<img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
text-bottom:<img  style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/>
0.2em:<img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
-1em:<img  style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/>
20%:<img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
-100%:<img  style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/>
</p>

#* {
  box-sizing: border-box;
}

img {
  margin-right: 0.5em;
}

p {
  height: 3em;
  padding: 0 .5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

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

<table>
  <tr>
    <td style="vertical-align: baseline">baseline</td>
    <td style="vertical-align: top">top</td>
    <td style="vertical-align: middle">middle</td>
    <td style="vertical-align: bottom">bottom</td>
    <td>
      <p>There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.</p>
<p>There is another theory which states that this has already happened.</p>
    </td>
  </tr>
</table>

table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table, th, td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}

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` and `::first-line` にも適用されます。
継承	なし
パーセンテージ	要素自身の行の高さ
計算値	パーセンテージか長さを指定すると絶対的な値、それ以外は指定されたキーワード
アニメーションの種類	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 の定義	勧告	初回定義

ブラウザーの互換性

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`vertical-align`	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 4	Opera 完全対応 4	Safari 完全対応 1	WebView Android 完全対応 1	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android 完全対応 14	Safari iOS 完全対応 1	Samsung Internet Android 完全対応 1.0

凡例

完全対応: 完全対応

構文