名古屋のIT勉強会や最新IT情報をお伝えします

先日、vertical-align：middleが効かずに軽くはまったので、その情報を共有したいと思います。

当初↑の図１のような配置。

修正で図２のように変更になりました。

上下（縦）の中央揃えですから、display:table-cellのvertical-alignを使って修正したのですが、これがなぜかうまく行きません。

ソースをよく確認してみると、floatを使っていることを思い出しました。

display:table-cellのvertical-alignで上下（縦）の中央揃えをする時には、floatは使ってはいけません。

今回、最初は縦の中央揃えの予定ではありませんでしたので、div Aにfloat:left、div Bにfloat:rightを使っていました。

後で修正が入った時にそのことを忘れていてdiv Bにそのままdisplay:table-cellのvertical-alignを付けてところ、うまく行かなかったというわけです。

正しくはfloatをやめ、どちらもdisplay:table-cellに変更することで、横並びになりvertical-align：middleが効くようになります。

ただdisplay:table-cellはIE7以前では対応していないので注意が必要ですね。
IE7の場合はハックを使う必要があります。

*:first-child+html .使用するクラス名 {
	display:inline;
	zoom:1;
}

とこんな感じで当てはめてみてください。

---