# vertical-align

> インライン要素やテーブルセルの縦方向の配置を指定するプロパティです。baseline、top、middle、bottom等の値があり、テキストと画像の位置調整に使用します。ブロック要素には効きません。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/vertical-align/

## 構文

```css
vertical-align: baseline | top | middle | bottom | text-top | text-bottom | <length> | <percentage>
```

## Tailwindでは

- `align-middle` → vertical-align: middle
- `align-top` → vertical-align: top
- `align-baseline` → vertical-align: baseline

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 画像とテキストを中央揃え

```css
vertical-align: middle;
```

### 例2: 上揃え

```css
vertical-align: top;
```

### 例3: 下揃え

```css
vertical-align: bottom;
```

### 例4: ベースラインから5px下げる

```css
vertical-align: -5px;
```

### 例5: テキストの上端に揃える

```css
vertical-align: text-top;
```

## TIPS

アイコンとテキストを揃える時に便利。テーブルセルの縦位置調整にも使える。インライン要素またはtable-cell専用。

## よくある間違い

ブロック要素には効かない！インライン、inline-block、table-cellのみ。Flexboxのalign-itemsと混同しやすい。

## AIがよく間違えるポイント

vertical-alignはインライン要素とtable-cellにしか効きません。ブロック要素の上下中央に使おうとするのは最頻出の誤用で、それはflex/gridの仕事です。実務での主な出番は2つ: 画像の下にできる隙間の解消（vertical-align: bottom等）と、テキスト横のアイコンの微調整（middleや数値指定）です。

## AIへの依頼文例

- 画像の下にできる謎の隙間をvertical-alignで解消して、原因（baseline揃え）も説明して
- テキスト横のインラインアイコンの上下位置をvertical-alignで微調整して

## 関連プロパティ

- [line-height](https://www.css-dictionary.com/property/line-height.md)
- [align-items](https://www.css-dictionary.com/property/align-items.md)
- [display](https://www.css-dictionary.com/property/display.md)