vertical-alignプロパティの説明
CSSのvertical-alignプロパティは、インライン要素や表のセルに対して縦方向の揃える位置を指定します。この機能はインラインレベルの空間を共有する要素同士の相対的な位置を示すものです。ボックスが分かれてしまい個別の空間を作るブロックレベルの縦位置には作用しません。
vertical-alignというプロパティ名を見ると、text-alignの効果と似たような使い方をイメージしてしまいますが、本プロパティの挙動には少し慣れが必要です。
vertical-alignに指定できる値
親要素との相対値
以下に示す値は、親要素に対する垂直方向の配置方法を表します。インライン要素に対して適用できます。
baseline- 指定された要素のベースラインを、親要素のベースラインに揃えます。一部の置換要素のベースラインは、HTMLの仕様上で未定義であるため、ブラウザの挙動に依存します。
text-top- 指定された要素の上端を、親要素のフォントの上端に揃えます。
text-bottom- 指定された要素の下端を、親要素のフォントの下端に揃えます。
middle- 指定された要素の中央を、親要素の
baseline + x-heightの半分に揃えます。 sub- 指定された要素のベースライン、を親要素の
subscript-baselineに揃えます。 super- 指定された要素のベースラインを、親要素の
superscript-baselineに揃えます。 <length>- 指定された要素のベースラインを、親要素のベースラインから値の距離だけ移動します。正の値は上方向へ、負の値は下方向へ移動します。
<percentage>- 指定された要素のベースラインを、親要素のベースラインから
line-heightに対する割合で移動します。正の値は上方向へ、負の値は下方向へ移動します。
行ボックスに対する相対値
以下に示す値は、行ボックスの寸法に対して垂直方向の配置方法を示すものです。インライン要素に対して適用できます。
top- 要素の上端を行ボックスの上端に揃えます。
bottom- 要素の上端を行ボックスの下端に揃えます。ベースラインを持たない要素では、マージン・エリアの境界が下端となります。
表のセル用の値
以下に示す値は、テーブルのセルに作用するものです。
top- 指定されたセルの上辺にあたるパディング・エリアの縁を行の上端に揃えます。
middle- 指定されたセルのパディング・ボックスを行の中央に揃えます。
bottom- 指定されたセルの下辺にあたるパディング・エリアの縁を行の下端に揃えます。
baseline- セルのベースラインを、行内でベースラインを揃えた他のすべてのセルのベースラインに揃えます。
text-top、text-bottom、sub、super、sub、sub、<length>、<percentage>を使用した場合も、同じ挙動を示します。
vertical-alignの使い方とサンプルコード
vertical-alignプロパティの構文は以下の通りです。
/* キーワード値 */
vertical-align: baseline;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;
vertical-align: sub;
vertical-align: super;
/* <length>値 */
vertical-align: 1em;
vertical-align: 20px;
vertical-align: -10vmin;
/* <percentage>値 */
vertical-align: 10%;
vertical-align: -10%;
/* グローバル値 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;
vertical-alignの実例
それでは実際にvertical-alignプロパティの書き方を見ていきましょう。以下の例は、インライン行の空間を共有する画像とテキストを用意し、画像の縦位置の寄せ方を変更した時の比較です。
基本的には、親要素が作成したベースラインを基準に相対的な位置の変化が起こります。該当する要素の移動距離が大きい場合に、後続するテキストの位置が変わっているように見えますが、あくまで移動しているのは画像の方です。
<div class="samp_box">
<section>
<h1>vertical-align: baseline;</h1>
<div>
<img src="/images/sample_img100x50.png" alt="img" class="va_1">
Text text text.
</div>
</section>
<section>
<h1>vertical-align: text-top;</h1>
<div>
<img src="/images/sample_img100x50.png" alt="img" class="va_2">
Text text text.
</div>
</section>
<section>
<h1>vertical-align: text-bottom;</h1>
<div>
<img src="/images/sample_img100x50.png" alt="img" class="va_3">
Text text text.
</div>
</section>
<section>
<h1>vertical-align: middle;</h1>
<div>
<img src="/images/sample_img100x50.png" alt="img" class="va_4">
Text text text.
</div>
</section>
<section>
<h1>vertical-align: sub;</h1>
<div>
<img src="/images/sample_img100x50.png" alt="img" class="va_5">
Text text text.
</div>
</section>
<section>
<h1>vertical-align: super;</h1>
<div>
<img src="/images/sample_img100x50.png" alt="img" class="va_6">
Text text text.
</div>
</section>
<section>
<h1>vertical-align: 10px;</h1>
<div>
<img src="/images/sample_img100x50.png" alt="img" class="va_7">
Text text text.
</div>
</section>
<section>
<h1>vertical-align: -2em;</h1>
<div>
<img src="/images/sample_img100x50.png" alt="img" class="va_8">
Text text text.
</div>
</section>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background-color: #eee;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background-color: #fff;
}
section > h1 {
margin: 1rem 0 0;
padding: 0;
font-size: 1rem;
}
section > div {
margin: .5rem 0 0;
background: linear-gradient( transparent 90%, rgba(102, 255, 255, .3) 90%);
}
div > img {
width: 100px;
height: 50px;
margin-right: .5rem;
}
.va_1 {
vertical-align: baseline;
}
.va_2 {
vertical-align: text-top;
}
.va_3 {
vertical-align: text-bottom;
}
.va_4 {
vertical-align: middle;
}
.va_5 {
vertical-align: sub;
}
.va_6 {
vertical-align: super;
}
.va_7 {
vertical-align: 10px;
}
.va_8 {
vertical-align: -2em;
}
表のセルに対する指定
vertical-alignを表（table）のセルに適用した場合は、セルの内容を揃える垂直の位置が変わります。効果はセルの中で完結するため、隣接するセルには影響しません。全てのセルの揃え位置を統一する場合は、<th>や<td>に対して一括で指定します。
<table class="samp_table">
<tr>
<th scope="col">Value</th>
<th scope="col">Sample</th>
<th scope="col">ex</th>
</tr>
<tr>
<th scope="row">top</th>
<td class="va_1">表示確認</td>
<td>隣接セル</td>
</tr>
<tr>
<th scope="row">middle</th>
<td class="va_2">表示確認</td>
<td>隣接セル</td>
</tr>
<tr>
<th scope="row">bottom</th>
<td class="va_3">表示確認</td>
<td>隣接セル</td>
</tr>
<tr>
<th scope="row">baseline</th>
<td class="va_4">表示確認</td>
<td>隣接セル</td>
</tr>
</table>
table.samp_table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid #000;
border-left: 1px solid #000;
background-color: #fff;
font-size: 0.875rem;
}
table th,
table td {
padding: .3rem;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
text-align: center;
}
table th {
background-color: #eee;
}
table th[scope="row"] {
height: 6rem;
}
table td[class] {
text-decoration: underline red;
}
.va_1 {
vertical-align: top;
}
.va_2 {
vertical-align: middle;
}
.va_3 {
vertical-align: bottom;
}
.va_4 {
vertical-align: baseline;
}