「vertical-align:middle」+「float」がうまいこと動作しない。

「vertical-align:middle」で縦方向中央ぞろえにした要素にfloatを設定すると、整列が解除されてしまう。んー、要素を左右に配置するならfloatだよなー、何とかならんかな、ということで、divを使って何とかしてみた。戦略は以下。

右にしたい要素をdivで囲って、divに「float:right;」を設定。
右の文字列からはfloat指定を解除。
これだけだと左と右で配置位置がずれてしまうので、右側にも左側と同じサイズの隠し要素を配置して高さをそろえる。

左の要素の文字列が2行にならなければ一応上手く動くかな。
CSS:

.box { width: 200px; margin-bottom: 20px; border: 1px solid #999; }
.box * {  
  vertical-align: middle;
}
.large { font-size: 24px; }
.small { font-size: 12px; }
.left { float:left; }
.right { float:right; }

HTML:

<body>
 <b>■floatの指定なし → 真ん中にそろう</b>
 <div class="box">
   <span class="large">大きい</span>
   <span class="small">小さい</span>
 </div>
  <b>■左右に振り分けるためfloatを付ける → 真ん中に整列しなくなる</b>
 <div class="box">
   <span class="large left">大きい</span>
   <span class="small right">小さい</span>
   <div style="clear:both;" ></div>
 </div>
 <b>■何とかしてみた</b>
 <div class="box">
   <span class="large left">大きい</span>
   <div class="right">
    <span class="large">&nbsp;</span>
    <span class="small">小さい</span>
   </div>
   <div style="clear:both;"  ></div>
 </div>
</body>

実行結果はこちら。なんかもっと上手いてはありそうだけど。