vertical-align

CSSでは、テキストや画像を上方向や下方向などに表示することができます。

本ページでは、vertical-alignプロパティについて説明します。

vertical-alignプロパティとは

vertical-alignプロパティは、親要素に対する縦方向の配置を指定します。例えば、親要素の上付き文字や下付き文字の位置に配置できます。

vertical-alignの定義は、以下のとおりです。

【vertical-alignの定義】
baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage | length | inherit
初期値 baseline
適用対象 インラインレベル、テーブルセル
継承 しない

値の説明

以下は、vertical-alignで使える値と説明です。

baseline
ベースラインを親要素のベースラインに合わせます。
sub
ベースラインを親要素の下付き文字の位置に合わせます。
super
ベースラインを親要素の上付き文字の位置に合わせます。
top
行全体の一番上に揃えます。親要素は、関係しません。
text-top
親要素のフォントの上に揃えます。
middle
高さの中央を、親要素のベースラインからx-heightの半分上に合わせます。
bottom
行全体の一番下に揃えます。親要素は、関係しません。
text-bottom
親要素のフォントの下に揃えます。
percentage
親要素に対して、指定したパーセント上げたり、下げたりします。下げる時は、マイナスで指定します。0%は、ベースラインが変わりません。
length
親要素に対して、指定した値だけ上げたり、下げたりします。使える値は、lengthをご参照ください。下げる時は、マイナスで指定します。値が0の時は、ベースラインが変わりません。

ベースラインとは、アルファベットを書く時の基準となる線です。xなどはベースラインの上に書きますが、qなどはベースライン下にはみ出します。

アルファベットのqが表示されていて、qの真ん中に線が引かれていてベースラインと説明されています。

利用例

以下は、利用例です。

【vertical-alignの利用例】
<p style="font-size:64px;">
q
<span style="font-size:32px;">
x
<span style="font-size:16px;vertical-align:top;">top</span>
<span style="font-size:16px;vertical-align:text-top;">text-top</span>
<span style="font-size:16px;vertical-align:super;">super</span>
<span style="font-size:16px;vertical-align:middle;">middle</span>
<span style="font-size:16px;vertical-align:baseline;">baseline</span>
<span style="font-size:16px;vertical-align:sub;">sub</span>
<span style="font-size:16px;vertical-align:text-bottom;">text-bottom</span>
<span style="font-size:16px;vertical-align:bottom;">bottom</span>
</span>
</p>

これは、以下のようなイメージで縦位置が配置されます。

大きくqと表示され、その右にxと表示されています。その右にはtop、text-top、super、middle、baseline、sub、text-bottom、bottomが表示されていて、topが行の一番上に揃えられています。それ以降は、順番に下になっていて、bottomは一番下に表示されています。bottomは、その行の一番下に揃えられています。

この例では、topとbottomが親要素の行の高さの上と下に表示されますが、同じ行内にもっと行の高さが高い要素があると、その高さの上と下に表示されます。

次は、percentageで指定する時のHTML例です。

【vertical-alignをpercentageで指定する時のHTML例】
<p>これは普通です。<span class="test">下に表示されます。</span></p>

以下は、CSSです。

【vertical-alignをpercentageで指定する時のCSS例】
.test {
  vertical-align: -50%;
}

上記は、以下のように表示されます。

「これは普通です。」の右に、「下の表示されます。」が下の方に配置されて表示されています。

画像への適用

img要素に対しても、同様に適用できます。以下は、HTMLの例です。

【vertical-alignを画像に適用する時のHTML例】
<div class="test1">
<img src="image.png" alt="テスト" class="test2">
</div>

次は、CSSです。

【vertical-alignを画像に適用する時のCSS例】
.test1 {
  border: solid;
  font-size: 64px;
}

.test2 {
  vertical-align: text-bottom;
}

上記は、以下のように表示されます。 高さ64pxの枠が表示されていて、下揃えで画像が表示されています。

画像が、下の方に表示されています。

表のセルへの適用

表のセルに対しても、同様に適用できます。以下は、例です。

【vertical-alignをtd要素に適用する例】
<table>
<th>通常表示<br>ベースライン</th>
<td style="vertical-align:top;">top</td>
<td style="vertical-align:bottom;">bottom</td>
</div>

上記は、表の枠などを付けると、以下のように表示されます。

ヘッダーセル1つと、データセル2つが表示されています。データセルの1つ目は、上側に表示されています。データセルの2つ目は、下側に表示されています。

留意点

親要素でline-heightを%などで指定していた場合、vertical-alignを指定しても配置が変わらないことがあります。

以下のHTMLがあったとします。

【line-heightを指定したvertical-alignのHTML例】
<p class="test1">
ここは普通です。
<span class="test2">topを指定しています。<p>
</p>

次は、CSSです。

【line-heightを指定したvertical-alignのCSS例】
.test1 {
  font-size: 32px;
  line-height: 200%;
}

.test2 {
  font-size: 16px;
  vertical-align: top;
}

上記は、以下のように表示されます。

「ここは普通です。」が32pxで表示されています。その右には、「topを指定しています。」が16pxで表示されていますが、「ここは普通です。」と同じ位置に表示されています。

vertical-alignでtopを指定しても、真ん中に表示されています。これは、line-heightを%やemなどで指定すると、高さが継承されるためです。親要素のフォントサイズが32pxでline-heightを200%に指定すると、高さは64pxになります。この64pxが継承されるため、上に揃えても高さが親要素と同じだと、真ん中に表示されます。

「ここは普通です。」の高さと、「topを指定しています。」の高さが同じであることが説明されています。また、高さが同じだと、上揃えしても真ん中に表示されることが説明されています。

このような時は、test2でline-heightを指定し直します。これで、親要素と高さを変えられます。

他には、test1で指定する時にline-height:2;と指定すると、2の値が継承されて子要素側のフォントサイズに合わせて高さが再計算されます。子要素側が16pxであれば、高さは32pxになるため、真ん中に表示されずに上側に表示されるようになります。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
vertical-align
【スマートフォン】
項目 Sa An Op Ch Fx Sm
vertical-align
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る