上下（縦）の中央揃えでtable-cellのvertical-alignが効かない時 | ネッタン

先日、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-

[kathew]

floatを使っているとダメなのか‥