vertical-alignが効かない時の対処法

verticalなalignをmiidleにしたいのに、全くいう事を聞きてくれません。
そんな時の対処法です。

目標はただ1つ!
上下高さの真ん中に位置づけしたい。

この目標を一緒に解決していきましょう。

まず落ち着く

焦っても解決しないので、どっしり構えましょう。
そして、次の事項を確認してください。

確認する

1・その要素、ブロック要素じゃないですか?
2・その要素にfloatかけてませんか?
3・かけてる所、間違ってませんか?
4・そもそもvertical-alignじゃないとダメですか?

1・ブロック要素には効かないので、インライン要素に変える。

例えば<div>タグはブロック要素なので、そのままだとvertical-alignは効きません。
なので、displayプロパティを使って、インライン要素に変えてあげましょう。
この時 display: inline; だと高さや幅の指定ができないので、 display: table-cell; を使います。
あとは必ず、高さを指定してください。
高さの真ん中に来るはずです。

2・インライン要素でも、floatが掛かっている場合は効きません。

せっかくインライン要素にしたのに、floatを使って横並びにしている時は、やはりvertical-alignは効きません。
さて、困りましたね。。。
こんな時は、floatを使うことをやめましょう。
そして横並びにしたい要素に display: table-cell; で横に並ばせ、かつ、 vertical-align: middle; をつけましょう。
もちろん、高さの指定も忘れずに!

3・vertical-alignをかける所、お間違えないですか?

vertical-alignは、子要素に継承されません。
従って、かけたい要素に向かって書いてあげる必要があります。
vertical-align: middle; にしたい要素の親要素に書いても、効きません。
もう一度、記述が間違っていないか確認しましょう。

4・本当にvertical-alignを使わないとダメなのでしょうか?

そもそも、高さの真ん中に位置付けする方法として、vertical-align以外にもあらゆる手段があります。
ちょっと他との兼ね合いで、display: table-cell;に出来ないんだよなー・・・っていう時もあります。

ならば、ブロック要素での高さの中央寄せにトライしてみてください。

親要素には、

を指定。

真ん中にしたい子要素には、

を指定。

コードサンプルは以下の通りです。
【html】


【css】

コーディングって本当に言うこと聞いてくれないと疲れちゃうけど、サクッと動いてくれるととてもうれしいですよね!だから、今日も頑張ってコーディングしていきましょう♪

Written by