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