【css】floatとvertical-alignを併用しようとしてがっつりハマった話

先日書いたブログに、先輩がこんな風にコメントしてくれたにもかかわらず、がっつりハマったので戒めのためにもメモしておきます。

なにが起きたか

要件としては、高さの違う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;
}

とか指定しても、全然中央寄せにならない。

それはそのはずで、.rightの高さ見てみると要素分の高さしか無い。（float指定してるからね！）
中央寄せもなにも上下に余白が無いから、寄るはずも無い。

.rightに高さを指定すればちゃんと中央寄せになるんだけど、可変だから高さを指定したくない。
じゃあfloatで横並びにした要素の高さを親要素の高さに揃えるにはどうしたらいいんだー！
とぜんぜん違う方向に突っ走ってしまい、ドツボにハマっていました。

結論

そもそもこの要件に対してfloat使うからおかしくなる。

display: table-cellにした要素はそもそもfloat使わなくても横並びになるので、シンプルにこれだけ指定すればよかっただけ。

.wrapper div {
    display: table-cell;
    vertical-align: middle;
}

凡ミスすぎてどうもすみません。