Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
構文・カスケード Widely available

vertical-align

vertical-align はインラインレベルの要素の垂直位置を制御する基本プロパティです。baseline、top、middle、bottom、sub、super などの値でテキストや画像の垂直揃えを調整できます。アイコンとテキストの位置合わせやテーブルセル内のコンテンツ配置に頻繁に使用されます。

垂直揃えインライン配置

概要

vertical-align はインラインレベルの要素の垂直位置を制御する基本プロパティです。baseline、top、middle、bottom、sub、super などの値でテキストや画像の垂直揃えを調整できます。アイコンとテキストの位置合わせやテーブルセル内のコンテンツ配置に頻繁に使用されます。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

CSS 
.icon { vertical-align: middle; }
.superscript { vertical-align: super; }
td { vertical-align: top; }

実務での使いどころ

  • アイコンとテキストの位置合わせ

    インラインアイコンをテキストの中央に揃え、自然な見た目のアイコン付きテキストを作成します。

注意点

  • vertical-align はブロックレベル要素には効果がありません。ブロック要素の垂直中央揃えには Flexbox を使用してください。

アクセシビリティ

  • 垂直揃えは視覚的な配置のみに影響し、コンテンツの意味やスクリーンリーダーの読み上げには影響しません。

参考リンク