定義と使い方

vertical-align属性は、インライン要素（inline-level elements）およびテーブルセル要素（table-cell elements）内部の垂直方向の整列を指定します。この属性を使用することで、該当する要素を上端（top）、中央（middle）、下端（bottom）などに整列させることができます。

このプロパティは、次のような2つのコンテクストにおいて使用することができます。

  • インライン要素（inline-level elements）に指定すると、ラインボックス（Line Box）内で該当する要素を垂直方向に整列させることができます。例えば、テキストの行内に画像を垂直方向に配置する場合などに使用できます。
  • テーブルのセル要素に指定すると、その内容を垂直方向に整列させることができます。

ご注意ください！
このプロパティは、ブロック要素を垂直方向に整列させるために使用することはできません。

理解を深めるための用語リファレンス

インライン要素（inline-level elements）

文書内で内容を改行することなく、既存の行の中に配置される要素のことです。具体的には、文中で強調された文字や挿入された画像などがその例にあたります。スタイルの観点から言えば、要素の前後にある要素を強制的に改行させない要素のことを指します。

インライン要素（inline-level elements）は、CSSのdisplayプロパティの値をinline、inline-block、inline-table、inline-flex、inline-gridなどのインラインに関連する値に指定することでも作成できます。

テーブルセル（table-cell）要素

HTMLテーブルの<td>や<th>要素のことを指します。テーブルセル要素（table-cell elements）は、CSSのdisplayプロパティの値をtable-cellに指定することでも作成できます。

ラインボックス（Line Box）

文書のフロー（flow）のコンテクストにおいて、ブロック領域のボックス内でテキストのように1つの行（Line）に含まれるコンテンツを包み込む仮想のコンテナのことです。

ブロック要素（block-level elements）

flexやgridのアイテム要素でない限り、視覚的に別個のブロックを形成し、要素の前後にある要素を改行させる要素のことです。簡単に言えば、ウェブページで新しい行から始まる要素であり、段落、リスト、テーブルなどがこれに該当します。

ブロック要素（block-level elements）は、CSSのdisplayプロパティの値をblock、list-item、table、flex、gridなどのブロックに関連する値に指定することでも作成できます。

基本例

CSSデモ：vertical-align デモボタンをクリックして、starの垂直方向の配置を確認してみてください！

vertical-alignプロパティは垂直方向の配置を設定しますが、text-alignプロパティは水平方向の整列を設定します。

形式構文

CSS 
selector {
    vertical-align: /* value */
}

構文

CSS 
/* キーワード値 */
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: 0.5em;
vertical-align: -3px;

/* <パーセンテージ（%）>値 */
vertical-align: 2%;
vertical-align: -3.2%;

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

形式定義

vertical-alignプロパティの形式定義
初期値 インライン要素：baseline
テーブルセル要素：inherit
適用対象 インライン要素およびテーブルセル要素
継承 いいえ
アニメーション 長さの単位値

公式仕様書（https://drafts.csswg.org/css2/#propdef-vertical-align）における初期値はbaselineです。しかし、主要なブラウザではインライン要素とテーブルセル要素での初期値を個別に適用しています。主要なブラウザでは、Appendix D. Default style sheet for HTML 4を参照しています。

値

vertical-alignプロパティの値は、インライン要素とテーブルセル要素で異なる意味を持ちます。

インライン要素における値

baseline

初期値です。該当する要素の下端をラインボックスのベースライン（baseline）に合わせて整列させます。ベースラインがない場合は、ラインボックスの下端に合わせて整列させます。<textarea>のような一部の置換要素のベースラインは、その位置が仕様通りに動作せず、ブラウザごとに異なる場合があります。

baseline

ベースライン（baseline）とは文字の「基準線」とも呼ばれ、英語の小文字で g、j、q などのように、文字の下端より下まで表示される文字と、そうでない文字の境界となる「基準となる線」を意味します。ハングルをはじめとする東南アジアの文字には、ベースラインより下まで表示される文字はありません。

middle

該当する要素は、ラインボックス内のテキストの x-height の中間点（0.5ex）を基準に垂直方向の中央に整列させます。

x-height

x-height は小文字の x の高さを意味します。x-height = 1ex

sub

該当する要素は、ラインボックスの下付き文字の基準に合わせて整列させます。
（この値は要素のテキストのフォントサイズに影響を与えません。）

super

該当する要素は、ラインボックスの上付き文字の基準に合わせて整列させます。
（この値は要素のテキストのフォントサイズに影響を与えません。）

text-top

該当する要素の上端を、ラインボックスのテキストの上端に合わせて整列させます。

text-bottom

該当する要素の下端を、ラインボックスのテキストの下端に合わせて整列させます。

<length>

長さ単位です。ラインボックスの baseline を基準に、該当する要素をこの長さの分だけ上げる（正の値）か、下げます（負の値）。
0cm の値は baseline と同一であることを意味します。

<百分率(%)>

百分率(%) 単位です。ラインボックスの baseline を基準に、該当する要素をこの % の割合だけ上げる（正の値）か、下げます（負の値）。
line-height プロパティの百分率です。0% の値は baseline と同一であることを意味します。

top

該当する要素の上端を、ラインボックスの上端に合わせて整列させます。

ラインボックスの上端とは、ラインボックスに背景色を適用した際に見える、最上端の境界を意味します。

bottom

該当する要素の下端を、ラインボックスの下端に合わせて整列させます。

ラインボックスの下端とは、ラインボックスに背景色を適用した際に見える、最下端の境界を意味します。

テーブルセル要素の値

ご注意ください！
テーブルセル要素の初期値は baseline ではありません。
テーブルセル要素である <td> と <th> 要素の vertical-align プロパティの初期値は inherit（親の値を継承することを意味します）です。<thead>、<tbody>、<tfoot> 要素の vertical-align プロパティの初期値が middle であり、その値を継承することで middle が適用されます。

baseline,
sub,
super,
text-top,
text-bottom,
<length>,
<百分率(%)>

セルの baseline は個別に設定されるのではなく、自身が含まれる行（row）内にある他のすべてのセルの baseline と一致するように調整されます。

top

当該要素の上端を、セルの padding-top の下側の境界線（エッジ）に合わせます。

middle

当該要素は、セルの padding-box 内で垂直方向の中央揃えが行われます。

bottom

当該要素の下端を、セルの padding-bottom の上側の境界線（エッジ）に合わせます。

例

vertical-align プロパティの実装を正確に理解するためには、その値に対する理解が不可欠です。ここでは、vertical-align プロパティの値を用いた様々な例について見ていきましょう。

インラインレベル要素における値

便宜上、HTMLコードは共通で使用します。

HTML 
<p style="font-size: 3em; background-color: silver;">
    <img class="icon" src="star.svg" alt="star"> Eng 日本語
</p>

vertical-align: baseline

初期値です。当該要素の下端を、ラインボックスの baseline を基準に揃えて配置します。

CSS 
.icon {
    vertical-align: baseline;
}
実際の適用例

vertical-align: middle

当該要素は、ラインボックスのテキスト x-height の中間点（0.5ex）を基準に、垂直方向の中央揃えが行われます。x-height は小文字の x の高さを意味します。x-height = 1ex

CSS 
.icon {
    vertical-align: middle;
}
実際の適用例

ちょっと待ってください！
middle という言葉とは裏腹に、文字の上下垂直方向で中央揃えになっていないように見えることがあります。もちろん、これはハングルを基準とした場合の話であり、英文で見るとアイコンの垂直配置が中央に揃っているように見えます。この middle 値は、あくまで英文基準の値であることを覚えておいてください！

vertical-align: sub

当該要素は、ラインボックスの下付き文字（subscript）を基準に配置されます。（この値は、要素テキストのフォントサイズには影響しません。）
HTMLでは、下付き文字を表す <sub> タグがこの位置に表示されます。

CSS 
.icon {
    vertical-align: sub;
}
実際の適用例

vertical-align: super

当該要素は、ラインボックスの上付き文字（superscript）を基準に配置されます。（この値は、要素テキストのフォントサイズには影響しません。）
HTMLでは、上付き文字を表す <sup> タグがこの位置に表示されます。

CSS 
.icon {
    vertical-align: super;
}
実際の適用例

vertical-align: text-top

当該要素の上端を、ラインボックスのテキスト上端に合わせて配置します。

CSS 
.icon {
    vertical-align: text-top;
}
実際の適用例

ちょっと待ってください！
実際の表示結果を見ると、ラインボックスのテキスト上端と正確に一致していないことがわかります。これは、該当するフォントをデザインする際の意図的な間隔や余白といった、フォント固有の特性によるものです。

vertical-align: text-bottom

当該要素の下端を、ラインボックスのテキスト下端に合わせて配置します。

CSS 
.icon {
    vertical-align: text-bottom;
}
実際の適用例

ちょっと待ってください！
実際の表示結果を見ると、ラインボックスのテキスト下端と正確に一致していないことがわかります。これは、該当するフォントをデザインする際の意図的な間隔や余白といった、フォント固有の特性によるものです。また、ハングルの場合は baseline が存在しないため、より異なって見えることがあります。

vertical-align: <length>

長さ単位の値です。ラインボックスのbaselineを基準に、該当要素をその値の分だけ上げる（正の値）か、下げます（負の値）。
0pxはbaselineと同一であることを意味します。

vertical-align: 0
CSS 
.icon {
    vertical-align: 0; /* baseline と同一 */
}
実際の適用例
vertical-align: 10px
CSS 
.icon {
    vertical-align: 10px; /* 正の値はその値の分だけ上げます。 */
}
実際の適用例
vertical-align: -10px
CSS 
.icon {
    vertical-align: -10px; /* 負の値はその値の分だけ下げます。 */
}
実際の適用例

vertical-align: <百分率(%)>

百分率（%）単位の値です。ラインボックスの baseline を基準に、当該要素をその % の割合だけ上げる（正の値）か、下げます（負の値）。line-height プロパティに対する百分率です。
0% は baseline と同一であることを意味します。

vertical-align: 10%
CSS 
.icon {
    vertical-align: 10%; /* 正の値はその % の分だけ上げます。 */
}
実際の適用例
vertical-align: -10%
CSS 
.icon {
    vertical-align: -10%; /* 負の値はその % の分だけ下げます。 */
}
実際の適用例

vertical-align: top

当該要素の上端を、ラインボックスの上端の縁（ふち）に合わせて配置します。ラインボックスの上端の縁とは、ラインボックスに背景色を適用した際に見える、一番上の端を意味します。

CSS 
.icon {
    vertical-align: top;
}
実際の適用例

vertical-align: bottom

当該要素の下端を、ラインボックスの下端の縁（ふち）に合わせて配置します。ラインボックスの下端の縁とは、ラインボックスに背景色を適用した際に見える、一番下の端を意味します。

CSS 
.icon {
    vertical-align: bottom;
}
実際の適用例

テーブルセル要素における値

テーブルセル要素の初期値は baseline ではありません。

テーブルセル要素である <td> および <th> 要素の vertical-align プロパティの初期値は inherit（親の値を継承することを意味します）です。
テーブル行要素である <tr> も初期値は inherit です。

<thead>、<tbody>、および <tfoot> 要素の vertical-align プロパティの初期値は middle であり、この値を継承することで middle を実現しています。

以下は、テーブルセル要素における初期値を示す例です。

CSS 
table {
    width: 100%;
}
table, tr, th, td {
    border: 1px solid;
}
th, td {
    padding: 20px;
}
.cell {
    background-color: silver;
}
HTML 
<table>
    <tbody> <!-- vertical プロパティの初期値： middle -->
        <tr> <!-- vertical プロパティの初期値： inherit -->
            <td>td<br>td<br>td</td> <!-- vertical プロパティの初期値： inherit -->
            <th class="cell">td</th> <!-- vertical プロパティの初期値： inherit -->
            <td>td<br>td<br>td</td> <!-- vertical プロパティの初期値： inherit -->
        </tr>  
    </tbody>
</table>
実際の適用例

実際に適用された様子を見ると、背景色を silver に指定したセル（.cell）の vertical-align が middle で実装されていることがわかります。

テーブルセル要素において vertical-align を指定しなかった場合、初期値がインラインレベル要素の初期値である baseline とは異なって表示されることに注意してください。

ブラウザ互換性

vertical-alignプロパティのブラウザ互換性
プロパティ
デスクトップ Chrome
Chrome
デスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
vertical-align 1 12 1 1

仕様書

vertical-alignプロパティに関する仕様書
仕様書
vertical-align CSS Inline Layout Module Level 3
#propdef-vertical-align

参考資料

関連項目