vertical-align

CSS の vertical-align プロパティは、インラインまたはテーブルセル要素の、縦方向の整列方法を定義します。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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;

The vertical-align プロパティには下記の値の 1 つを指定します。

値 (インライン要素用)

親要素との相対値

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

baseline

要素の baseline を親要素の baseline に揃えます。<textarea> のような、いくつかの 置換要素 の baseline は HTML 仕様で未定義で、このため、このキーワードの挙動はブラウザにより異なるかもしれません。

sub

要素の baseline を親要素の subscript-baseline に揃えます。

super

要素の baseline を親要素の superscript-baseline に揃えます。

text-top

要素の top を親要素のフォントの top に揃えます。

text-bottom

要素の bottom を親要素のフォントの bottom に揃えます。

middle

要素の middle を親要素の baseline + x-height の半分 に揃えます。

<length>

要素の baseline を、親要素の baseline の指定値分上に揃えます。負の値を使えます。

<percentage>

<length> 値と似ていますが、line-height プロパティに対するパーセンテージで指定します。負の値を使えます。

行との相対値

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

top

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

bottom

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

baseline を持たない要素では、代わりに bottom のマージン境界が使われます。

値 (テーブルセル用)

baseline (右も同様になります: sub, super, text-top, text-bottom, <length>, <percentage>)

セルの baseline を、行内で baseline 揃えにされた他のすべてのセルの baseline に揃えます。

top

セルの top のパディング境界を行の top に揃えます。

middle

セルのパディングボックスが行の中央になるようにします。

bottom

セルの bottom のパディング境界を行の 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; }

結果

仕様

ブラウザー実装状況

関連情報

• Typical use cases of Flexbox の "Center item" の章
• line-height, text-align, margin
• Understanding vertical-align, or "How (Not) To Vertically Center Content"
• All You Need To Know About Vertical-Align