「インライン」内での位置を指定する
vertical-alignはインライン要素でのみ使えるプロパティです。インライン要素に含まれているインライン要素の位置を指定します。例えば、文章中に出現する画像の位置などを指定します。
See the Pen verical-alignの使い方 by バイオハックch (@synd1090) on CodePen.
ブロック要素では使えない
vertical-alignはインライン要素でしか使えません。そのため、div要素でvertical-alignを使おうとするときは、display:inlineや、display:inline-blockなどで要素を変える必要があります。
vetical-alignで指定できる値には、top、text-top、middle、baseline、text-bottom、bottomなどがあります。どれも親要素に対しての縦方向の整列を示しています。