vertical-align

値の意味

• baseline：初期値です。要素のベースラインを、親の文字のベースラインに揃えます。画像は下端がベースラインなので、文字のベースラインの上に乗り、下に「g」のはみ出す部分の分だけすき間ができます。
• middle：要素の上下の真ん中を、親のベースラインから小文字の「x」の高さの半分だけ上の位置に揃えます。
• text-top / text-bottom：要素の上端・下端を、親の文字の上端・下端（フォントの高さの範囲）に揃えます。
• top / bottom：要素の上端・下端を、行の上端・下端に揃えます。行の高さは、その行でいちばん高いものに合わせて決まります。
• sub / super：下付き・上付きの位置にずらします。ずらす量はブラウザが決めます。
• 長さ・%：ベースラインから上にずらします（負の値なら下にずらします）。% は、その要素の line-height に対する割合です。

表のセルでは

td や th に書くと、セルの中身を縦のどこに寄せるかが決まります。top で上、middle で真ん中、bottom で下に寄せ、baseline では同じ行のセルどうしで 1 行目のベースラインを揃えます。HTML の表のセルは、ブラウザの既定のスタイルで middle になっています。

気をつけること

• 効くのは、img や span、inline-block などのインラインの要素と、表のセルだけです。ブロックの要素や、フレックスボックス・グリッドの項目には効きません（項目を揃えるには align-self を使います）。
• 画像の下のすき間を無くしたいときは、画像に vertical-align: bottom（または top・middle）を書くか、display: block にします。

Firefox だけが読む書き方

仕様（CSS Inline Layout Module Level 3）では、vertical-align は揃える線（alignment-baseline）、ずらし（baseline-shift）、複数行の箱で揃える行（baseline-source）の一括指定になり、次の書き方が増えました。今はどれも Firefox だけが対応していて、Chrome・Edge・Safari では、これを含む宣言がまるごと無視されます。

• 揃える線のキーワード alphabetic・ideographic・central・mathematical・hanging と、ずらしのキーワード center
• middle 4px のように、揃える線とずらしを組み合わせる書き方
• first / last：inline-block のように何行もある要素を、1 行目と最後の行のどちらのベースラインで揃えるか（書かなければ、inline-block は最後の行、ほかは 1 行目）

このページのプレビューでは、文章の間に、行を高くする灰色の棒（1 番目の子）と見本の画像（2 番目の子）を並べ、画像に vertical-align を書いています。灰色の棒が行の上端を決めるので、top と text-top、bottom と baseline の違いが見えます。フレックスボックスやグリッドの項目には効かないので、補助の宣言で箱をふつうのブロック（display: block）にしています。