vertical-align
vertical-align は CSS のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
baseline | 1 | 12 | 1 | 1 | 18 | 1 |
bottom | 1 | 12 | 1 | 1 | 18 | 1 |
middle | 1 | 12 | 1 | 1 | 18 | 1 |
sub | 1 | 12 | 1 | 1 | 18 | 1 |
super | 1 | 12 | 1 | 1 | 18 | 1 |
text-bottom | 1 | 12 | 1 | 1 | 18 | 1 |
text-top | 1 | 12 | 1 | 1 | 18 | 1 |
top | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
.icon { vertical-align: middle; }
.superscript { vertical-align: super; }
td { vertical-align: top; }ライブデモ
実務での使いどころ
-
アイコンとテキストの位置合わせ
インラインアイコンをテキストの中央に揃え、自然な見た目のアイコン付きテキストを作成します。
注意点
- vertical-align はブロックレベル要素には効果がありません。ブロック要素の垂直中央揃えには Flexbox を使用してください。
アクセシビリティ
- 垂直揃えは視覚的な配置のみに影響し、コンテンツの意味やスクリーンリーダーの読み上げには影響しません。