vertical-alignが効かないとお嘆きのあなたへ

画像横に文字を揃えたいって時に画像の中段って言葉が出てこなくて、真ん中って言ってしまったりした事を思い出します。ほらーえーとえーと！真ん中！真ん中に揃えたいの！真ん中ってどこやねんって。画像の中段も変かな。じゃあ、垂直方向の真ん中！真ん中ー！！！

インライン要素とブロック要素

HTMLにはブロック要素とインライン要素があります。体重が重たい要素がブロック要素で軽い要素がインライン要素です。要素っていうのはHTMLで言うタグの事です。ブロック要素は重たいので、横に並びませんが、インライン要素は軽いので浮きます。ヘリウムガスの風船みたいなもんです。ただ違うのは重なると必ず、既に居る風船の右隣に移動します。扱い方としてブロック要素は名前の通りブロック（レイアウト用）として扱われることが多いです。インライン要素は、ブロック要素内で使われる事が多いだろうとは思いますが、文中の一文に工夫を加えたい時に使われる事が多いです。

vertical-alignはインライン要素へ指定するプロパティ

訳の分からない説明が終わってvertical-alignです。これは、インライン要素のラインを決めるプロパティだと思ってます。CSSのプロパティって言葉は、CSSの持っている機能って意味で使われるんじゃないでしょうか。というわけで、vertical-alignを使えば、インライン要素内での文字が並ぶ高さを決める事ができます。

普通に使う

次の行へ改行されたもの（実際はしてないけど）だけ効いてるのが分かります。

別々のベースラインを設定する

これらをブロック要素で囲んでやれば上手く行くんだと思います。

てやー。