【HTML, CSS】vertical-alignの使い方を勘違いしていた…

vertical-alignの使い方を勘違いしていた...

私がプログラミングを学び始めたときに、htmlやらcssやらの使い方がわからずに悩んだことが多かったです。
その中でもvertical-alignは厄介でした。

横並びの要素を上下中央に設置したければvertical-alignを使え!!と言われてやってみても、全っっっ然効かない!!

というわけで、この記事ではvertical-alignはどんな要素に対して効くのかを紹介します。

vertical-alignは同じ階層のinline要素に対して効く

表題の通り、答えは「vertical-alignは同じ階層のinline要素に対して効く」です。
例を使って説明します。

そもそも、元々は以下のような状態を実現したいと思っていました。

これはvertical-alignでは実現できない

外側の灰色のボックスの上下中央に白いボックスを配置したいのです。

このために、以下のHTMLを書けばいいと私は思っていました。

さらに以下のCSSで完成だと思っていました。

(vertical-align以外は装飾のために書きました)

outer-boxクラスの子要素にinner-boxクラスがあり、inner-boxクラスにvertical-alignがかかっている状態です。

inner-boxクラスをouter-boxクラスの上下中央に置きたいのだから、inner-boxクラスにvertical-alignをかければいいんじゃないの?」と少し前の私は思っていました。

出力結果は以下の通りです。

vertical-alignが効かない

なにも効果はありません。
なぜなら表題のとおり、vertical-alignは「同い階層のinline要素に対して効く」からです。

私は勘違いをしていました。
今回の例のように「外側のblock要素と内側のblock要素を上下中央に設置する」ためにはvertical-alignは使えないのです。
「vertical-align = 上下中央」と単純に覚えていたことが失敗でした。

vertical-alignの正しい使い方

以下のHTMLをご覧ください

これに以下のCSSをあてます。

outer-boxクラスの子要素にinner-left-boxクラスとinner-right-boxクラスを作りました。装飾のためにつけているCSSがたくさんあります。

この状態をブラウザで確認すると以下の通りです。

block要素なので縦に並びます。
同じ階層にあるこれらふたつのクラスをこれから上下中央に設置します。

まず、vertical-alignが効くのはinline要素だと言いました。
以下のようにCSSを書き換えて見ます。

display: inline-block;を追加しました。
widthなどのプロパティも効かせたいからです。

そもそも、vertical-alignは

これをブラウザで確認すると以下のようになります。

display:inline-block;

inline要素になったので、スペースがあれば回り込んできます。

これらふたつのボックスの高さを上下中央に設置したいからvertical-alignを使うのです。

以下のようにCSSを書き直します。

vertical-alignを追加しました。
これをブラウザで確認すると以下の通りです。

vertical-align:middle;

確かに上下中央に揃いました。

なんども言いますが、inner-left-boxクラスとinner-right-boxクラスが上下中央に設置できたのは、ふたつが同じ階層にあり、かつinline要素だったからです。

vertical-alignが使えるパターンのまとめ

vertical-alignが効く時は

  • 上下左右に設置したい要素が同じ階層にあるとき
  • 上下左右に設置したい要素がinline要素であるとき

これらを守った上で中央揃えしたい要素全てにvertical-alignをつけましょう。

ただし、上記を守ってもvertical-alignが効かないパターンがあります。
以下の通りです。

  • 上下中央に設置したい要素にfloatがかかっているとき
  • 上下中央に設置したい要素にposition: absolute;がかかっているとき
  • 上下中央に設置したい要素にposition: fixed;がかかっているとき

position: fixed;がかかった要素はその位置が固定されるのと同時にabsoluteも実はかかっているのです。
詳しくはfixedの特性をご覧ください。

まとめ

何度でも言います。
vertical-alignは「同じ階層のinline要素に対して効く」です。

これはdivタグやpタグで囲まれたblock要素だけでなく、imgタグの画像でも同じことです。
特に、高さの異なる画像と文字列を横並びにするときはvertical-alignを使って見た目を良くすることもできます。