vertical-align プロパティ

最終更新：2026-09-13

vertical-align vertical-align プロパティ

vertical-align プロパティは、行内要素や表セル内のコンテンツの垂直配置を制御します。top、middle、baseline などのキーワードや、長さ・パーセンテージ値をサポートし、アイコンと文字の整列、行内要素の位置調整、表内のコンテンツの垂直位置の制御によく使われます。ただし vertical-align はブロックレベル要素には無効である点に注意してください。

カテゴリ
初期値	baseline
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS1
状態	標準

📝 構文

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <length> | <percentage>;

⚙️ 値

値	タイプ	説明
`baseline \| sub \| super \| text-top \| text-bottom \| middle \| top \| bottom`	キーワード	垂直配置のキーワード
`<length> \| <percentage>`	タイプ	長さまたはパーセンテージで表す正確なオフセット値

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
vertical-align	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： vertical-align の配置は、親コンテナ全体ではなく、現在の行ボックス（line box）や表セルに対する相対的なものです。

注意： vertical-align はブロックレベル要素（div、p など）には無効です。ブロック要素を垂直中央にするには Flexbox や Grid を使ってください。

❓ よくある質問

Qvertical-align: middle で要素を垂直中央にできないのはなぜですか？

Avertical-align: middle は、要素の垂直中点を、親のベースラインに x 高の半分を加えた位置に揃えるもので、親コンテナに対する中央揃えではありません。行内要素の微調整用であり、真の垂直中央手段ではありません。

Q画像の下に隙間ができるのはなぜですか？

A画像は既定で行内要素であり、行はベースラインより下の下伸び部分（descender）のスペースを確保します。vertical-align: bottom/middle/top を設定するか、display: block にするとその隙間が消えます。

QCSS で行内画像を隣の文字と垂直中央にするには？

A画像か隣の行内要素に vertical-align: middle を指定すると、文字と視覚的に中央揃えされます。厳密に整列させたいなら、画像を display: inline-block にして vertical-align: middle と組み合わせるか、Flexbox の align-items: center を使います。

Qvertical-align が div や p で無視されるのはなぜですか？

Avertical-align は行内要素・行内ブロック・表セル（td/th）にのみ適用され、自身を所在行のベースラインに対して整列させます。ブロックレベル要素（div、p）には影響しません。ブロック要素を垂直中央にするには Flexbox や Grid を使ってください。