もう怖くない「真ん中揃え」
テキストやイメージなどの要素を横に並べるときに、
縦位置を中央揃えにしたいときが時々あります。（何もしなければ下揃えになっていると思います）
（例１）
HTMLはこうなっています（はしっこまで見るにはクリックしてください）↓
（例２）
HTMLはこうなっています↓
もしワードやエクセルの世界なら、何がむずかしいの？ってくらいのことですが、
htmlの場合は、こんなちょっとしたことがややこしい。。。
方法を調べていると、キーとなるcss属性がvertical-align:middleだということ、
「行の真ん中に表示してね」という意味らしいことはわかったのですが、
どう使ったらいいのかはいまひとつわからない・・・
わたしはこれがずーっと苦手で、どうしてもやらなきゃいけなくなった時にかなりつまづきながら
何パターンか試しているうちにトリアエズナッタ！！の世界・・・。
そんな苦手なvertical-align:middleが、最近ようやく理解できたみたいなので、
この場を借りて説明してみます。 m(. .)m
例１のように、１つの行（インライン要素）の中で、spanで区切って複数の文字サイズが登場することがあります。
サイズの違う文字列を真ん中揃えにする場合は、
行中に登場する<span>にcss属性”vertical-align:middle”を追加すればOK
するとこうなります。
では例２のように、二つのイメージの場合は・・・？
両方の<img>にcss属性”vertical-align:middle”を追加すればOK
するとこうなります。
こうやって整理してみるとなんともシンプルな・・・・。
どうしてこれが今まで理解できなかったのかが疑問なくらい。
では、文字やイメージなど複数の要素を含む要素<div>の場合は・・・？
HTMLはこうなっています↓
<div>はブロック要素なので、単に連続して並べただけでは１行になりません。
ふたつの<div>が横に並ぶように、まず必要なのはそれぞれの<div>に割り当てられているclassに、css属性display:inline-blockを追加。
これで、まずはこうなります。
そしてさらに、両方のclassに vertical-align:middle を追加すればOK
するとこうなります。
あらま。やっぱり簡単みたいですね。
もう怖くない〜 vertical-align:middle！！！
