【css】floatとvertical-alignを併用しようとしてがっつりハマった話 - tanihiro.log先日書いたブログに、先輩がこんな風にコメントしてくれたにもかかわらず、がっつりハマったので戒めのためにもメモしておきます。 なにが起きたか 要件としては、高さの違う2つのボックスを横並びにして、上下中央寄せにする、というものでした。 <div class="wrapper"> <div class="left">左は<br>二行</div> <div class="right">右は一行</div> </div> .wrapper div { float: left; } とりあえず、横並びだからfloatを指定して、上下中央寄せはvertical-alignを使えばいっかと思っていたら、全然そんなことなかった。（ちゃんと仕様を理解しないでなんとなく使っているからこうなる） .right { display: table-cell; vertical-align: middle; } とか
