在宅ワーク知恵袋

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


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

(例1)
スクリーンショット 2015-11-26 10.41.13

HTMLはこうなっています(はしっこまで見るにはクリックしてください)↓
スクリーンショット 2015-11-26 11.36.27

(例2)
スクリーンショット 2015-11-26 10.41.19

HTMLはこうなっています↓
スクリーンショット 2015-11-26 11.39.16

もしワードやエクセルの世界なら、何がむずかしいの?ってくらいのことですが、
htmlの場合は、こんなちょっとしたことがややこしい。。。

方法を調べていると、キーとなるcss属性がvertical-align:middleだということ、
「行の真ん中に表示してね」という意味らしいことはわかったのですが、
どう使ったらいいのかはいまひとつわからない・・・
わたしはこれがずーっと苦手で、どうしてもやらなきゃいけなくなった時にかなりつまづきながら
何パターンか試しているうちにトリアエズナッタ!!の世界・・・。

そんな苦手なvertical-align:middleが、最近ようやく理解できたみたいなので、
この場を借りて説明してみます。 m(. .)m

例1のように、1つの行(インライン要素)の中で、spanで区切って複数の文字サイズが登場することがあります。
サイズの違う文字列を真ん中揃えにする場合は、
行中に登場する<span>にcss属性”vertical-align:middle”を追加すればOK

スクリーンショット 2015-11-26 11.43.35

するとこうなります。
スクリーンショット 2015-11-26 10.40.22

では例2のように、二つのイメージの場合は・・・?
両方の<img>にcss属性”vertical-align:middle”を追加すればOK

スクリーンショット 2015-11-26 11.44.19

するとこうなります。
スクリーンショット 2015-11-26 10.40.29

こうやって整理してみるとなんともシンプルな・・・・。
どうしてこれが今まで理解できなかったのかが疑問なくらい。

では、文字やイメージなど複数の要素を含む要素<div>の場合は・・・?
スクリーンショット 2015-11-26 12.08.03

HTMLはこうなっています↓
スクリーンショット 2015-11-26 12.08.36

<div>はブロック要素なので、単に連続して並べただけでは1行になりません。
ふたつの<div>が横に並ぶように、まず必要なのはそれぞれの<div>に割り当てられているclassに、css属性display:inline-blockを追加。

スクリーンショット 2015-11-26 11.45.21
これで、まずはこうなります。

スクリーンショット 2015-11-26 11.34.06

そしてさらに、両方のclassに vertical-align:middle を追加すればOK

スクリーンショット 2015-11-26 11.45.32
するとこうなります。

スクリーンショット 2015-11-26 11.34.59

 

あらま。やっぱり簡単みたいですね。

もう怖くない〜 vertical-align:middle!!!


この記事を書いた人:IBC

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