もう怖くない「真ん中揃え」

• 更新：2017/12/05
• ライター：IBC

Tweet

テキストやイメージなどの要素を横に並べるときに、
縦位置を中央揃えにしたいときが時々あります。（何もしなければ下揃えになっていると思います）

（例１）

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！！！

この記事を書いた人：IBC

IBC

ITブートキャンプ運営事務局です。 随時ブログを更新していきます。