vertical-align:インライン要素や表のセルに対して縦方向の揃える位置を指定する
初期値 | baseline |
適用対象 | インラインレベル要素、テーブルセル要素。::first-letter および::first-line |
継承 | しない |
アニメーション | <length>値 |
対応ブラウザ | caniuseで確認 |
vertical-alignプロパティの説明
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
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
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
プロパティの書き方を見ていきましょう。以下の例は、インライン行の空間を共有する画像とテキストを用意し、画像の縦位置の寄せ方を変更した時の比較です。
基本的には、親要素が作成したベースラインを基準に相対的な位置の変化が起こります。該当する要素の移動距離が大きい場合に、後続するテキストの位置が変わっているように見えますが、あくまで移動しているのは画像の方です。
表示確認
CSS
.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;
}
HTML
<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>
表のセルに対する指定
vertical-align
を表(table)のセルに適用した場合は、セルの内容を揃える垂直の位置が変わります。効果はセルの中で完結するため、隣接するセルには影響しません。全てのセルの揃え位置を統一する場合は、<th>
や<td>
に対して一括で指定します。
表示確認
CSS
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;
}
HTML
<table class="samp_table">
<tr>
<th>Value</th>
<th>Sample</th>
<th>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>
vertical-alignに関連するCSSプロパティ
要素の表示や配置方法 | |
---|---|
bottom | 位置指定で配置された要素の底辺からの距離を指定する |
break-after | ボックスの終了時にページやカラムをどのように区切るかを指定する |
break-before | ボックスの開始前にページやカラムをどのように区切るかを指定する |
break-inside | ボックスの途中でページやカラムをどのように区切るかを指定する |
clear | フロート(float)の回り込みを解除する |
clip | 要素を切り抜いて可視化する範囲を指定する |
box-decoration-break | 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する |
display | 要素の表示形式を指定する |
float | 要素を右または左へ寄せて配置する |
image-orientation | 横向きや逆さまに撮影された写真を正しい向きに回転させる |
image-rendering | 画像を拡大縮小するアルゴリズムを設定する |
left | 位置指定で配置された要素の左辺からの距離を指定する |
object-fit | 画像や動画などの置換要素をボックスに収める方法を指定する |
object-position | ボックスの中に配置されるオブジェクトの位置を指定する |
overflow | 要素からはみ出した内容の表示方法をまとめて指定する |
overflow-wrap | インライン要素に対して溢れる単語の折り返し方法を指定する |
overflow-x | 要素から水平方向にはみ出す内容の表示方法を指定する |
overflow-y | 要素から垂直方向にはみ出す内容の表示方法を指定する |
position | 要素の位置指定の種類を変更する |
right | 位置指定で配置された要素の右辺からの距離を指定する |
vertical-align | インライン要素や表のセルに対して縦方向の揃える位置を指定する |
visibility | 要素の領域を残したまま表示・非表示を切り替える |
z-index | 要素の重なり順序を指定する |