vertical-alignが効かない人は多分勘違いしている

知らなくても大丈夫(個人比)なプロパティですが、モヤモヤしている人は多いと思うので、今回はvertical-alignの解説です。

私がcss独学を初めた当時、あちこちのサイトに
「text-align: centerは水平方向の中央寄せ、vertical-align:middleは垂直方向の中央寄せ」と書いてありました。同じように学んだ人も多いと思います。

それが誤解の元凶です。

vertical-alignが効かないと思っている人は半数ぐらいがこの勘違いが理由なんじゃないかと思っています。

vertical-alignは、正確には「垂直方向の整列に使うプロパティ」です。
”整列”　ってことは対象は複数じゃないと意味ないですからね。(tableセル除く)

vertical-alignの働き方と、「top,middle,bottom,baseline」だけじゃない値について説明していきます。

vertical-alignはインライン要素またはセル要素の整列を行う

vertical-alignは、インライン要素とtableのセル要素に対して働きます。

こう書くとtext-alignと似ているように見えますが、text-alignの場合「ブロックレベル要素」に指定することで、テキストやインライン要素が左右中に配置されますが、vertical-alignは「インライン要素(またはtableセル)」に指定します。

継承しないので、div やpなどのブロックレベル要素にvertical-alignを指定しても無効です。

p{
text-align: center;
}

は有効ですが、

p{
vertical-align: middle;
}

は無効ということです。

兄弟要素との相対的な位置に配置される

たとえば

<div style="height: 300px;">
  <img src="xxxx.jpg" alt="xxxx" />
</div>

img{
  vertical-align: middle;
}

とあると、高さ300pxの親要素の中央に画像が配置されそうなものですが、残念ながらなりません。

この場合は、divにdisplay: table-cellとvertical-align: middle を指定することで期待に応えられると思います。

まぁ現代にはflexがあるので、

div{
 display: flex;
 align-items: center;
}

の方が良いと思いますが。参考：flexレイアウト その2

vertical-alignは兄弟要素の整列の為に使います。

例として、vertical-alignなしで画像にspanとaタグを足してみます。

<div>
  <a href="">リンク</a>
  <img src="xxxx.jpg" alt="xxxx" />
  <span>SPAN</span>
</div>

各要素はbaselineにそって配置されています。
ここに、 img{ vertical-align: middle ;} を加えるとこうなります。

3つのインライン要素が中央揃いで整列したのが分かると思います。親要素に対して中央に揃うわけではありません。

vertical-alignは数値や％でも指定できる

先ほど見たとおり、vertical-alignの初期値はbaselineで、親要素からの継承はしません。

よく使われる値は「top」「middle」「bottom」ですが、他にも「text-top」「text-bottom」、数値、％で指定することができます。

topとtext-top。bottomとtext-bottomの何が違うのか分かりにくいと思いますので比較で両方載せておきます。

top bottom は他要素の絶対的な高さに対する位置に配置されるのに対して、text-top・text-bottomは他要素のvertical-alignの値を基準とした相対的なtop・bottomになります。

vertical-alignの初期値はbaseline(画像でいえばbottomの位置)なので、例のtext-topも画像のbottomにあわせて配置されています。もし画像にvertical-align:middleが設定されれば、text-topを指定されているSPANも連動して画像中央の位置に配置されることになります。

数値はbaselineからの距離。％はline-heightに対する比率

vertical-align: 50px; のように数値で指定した場合は、baselineを基準に上向きに配置されます。（数値がマイナスの場合は下向き）

％指定も同じくbaseline基準で上下に動かしますが、「vertical-alignを指定した要素のline-heightに対する%」であって、親要素の高さとは関係ありませんので注意が必要です。