インライン要素やテーブルセルの縦方向の配置を指定するプロパティです。baseline、top、middle、bottom等の値があり、テキストと画像の位置調整に使用します。ブロック要素には効きません。
vertical-align: baseline | top | middle | bottom | text-top | text-bottom | <length> | <percentage>| align-middle | vertical-align: middle |
| align-top | vertical-align: top |
| align-baseline | vertical-align: baseline |
vertical-align: middle;画像とテキストを中央揃え
vertical-align: top;上揃え
vertical-align: bottom;下揃え
vertical-align: -5px;ベースラインから5px下げる
vertical-align: text-top;テキストの上端に揃える
アイコンとテキストを揃える時に便利。テーブルセルの縦位置調整にも使える。インライン要素またはtable-cell専用。
ブロック要素には効かない！インライン、inline-block、table-cellのみ。Flexboxのalign-itemsと混同しやすい。
vertical-alignはインライン要素とtable-cellにしか効きません。ブロック要素の上下中央に使おうとするのは最頻出の誤用で、それはflex/gridの仕事です。実務での主な出番は2つ: 画像の下にできる隙間の解消（vertical-align: bottom等）と、テキスト横のアイコンの微調整（middleや数値指定）です。
画像の下にできる謎の隙間をvertical-alignで解消して、原因（baseline揃え）も説明して
テキスト横のインラインアイコンの上下位置をvertical-alignで微調整して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。