CSS ・ 文字・フォント
vertical-align
縦方向の揃え位置
行の中に並ぶインライン要素や、表のセルの中身を、縦方向のどこに揃えるかを指定します。
01
サンプルコード
HTML
1<p>
2 <span class="big">大</span>
3 <span class="icon top"></span>top
4 <span class="icon middle"></span>middle
5 <span class="icon bottom"></span>bottom
6</p>
CSS
1p {
2 font-size: 16px;
3 background: #f6ead8;
4 padding: 8px;
5}
6.big {
7 font-size: 48px;
8}
9.icon {
10 display: inline-block;
11 width: 24px;
12 height: 24px;
13 background: #b68235;
14}
15.top {
16 vertical-align: top;
17}
18.middle {
19 vertical-align: middle;
20}
21.bottom {
22 vertical-align: bottom;
23}
02
実行結果
ブラウザでの表示茶色の四角（inline-block）を、大きな文字で高くなった行の上・中央・下に揃えています
03
解説
vertical-align は、同じ行に並んだインライン要素（文字・画像・inline-block の要素など）を、縦方向のどこに揃えるかを指定します。
上の例では、大きな文字で高くなった行の中で、小さな画像を上（top）・中央（middle）・下（bottom）に揃えています。
表のセル（td・th）に指定すると、セルの中身を上・中央・下のどこに置くかを決められます。
ブロック要素（div など）には効きません。ボックスの中身を縦に中央揃えしたいときは、Flexbox の align-items: center を使います。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
baseline | 文字の基準線に揃える（初期値） |
top | 行の一番上に揃える |
middle | 行の中央に揃える |
bottom | 行の一番下に揃える |
text-top / text-bottom | 親の文字の上端 / 下端に揃える |
画像の下にできるすき間を消す
img は文字と同じ基準線に揃うため、下に少しすき間ができます。vertical-align を変えると消えます。
CSS
1img {
2 vertical-align: bottom;
3}
表のセルを上揃えにする
セルの中身は初期値で縦中央になります。上に揃えたいときに指定します。
CSS
1td {
2 vertical-align: top;
3}
注意点
- 01div などのブロック要素の中身を縦中央にする目的では効きません（Flexbox・Grid を使います）。
- 02text-align は横方向、vertical-align は縦方向の揃えです。