vertical-alignが効かない時

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

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

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

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

まず落ち着く

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

確認する

１・その要素、ブロック要素じゃないですか？
２・その要素にfloatかけてませんか？
３・かけてる所、間違ってませんか？
４・そもそも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;に出来ないんだよなー・・・っていう時もあります。

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

親要素には、

.クラス名{
    position: relative;
    width: ○○px;
    height: ●●px;
}

を指定。

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

.クラス名{
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto;
     width: ▲▲px;
     height: ▲▲px;
}

を指定。

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

Lorem ipsum dolor sit amet.

【css】

.aaA{
        position: relative;
	width: 300px;
	height: 300px;
}
.bbB{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100px;
	height: 100px;
}

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

Written by Baycross Marketing