vertical-align

テキスト・フォント

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

構文

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

コード例

例 1

vertical-align: middle;

画像とテキストを中央揃え

例 2

vertical-align: top;

上揃え

例 3

vertical-align: bottom;

下揃え

例 4

vertical-align: -5px;

ベースラインから5px下げる

例 5

vertical-align: text-top;

テキストの上端に揃える

💡 TIPS

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

⚠️ よくある間違い

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

関連プロパティ

ブラウザサポート

全ブラウザ対応