divを使った高さの真ん中揃え【続編】

HTML・CSS | 2013.03.04

以前投稿の記事「div内の高さにおける真ん中揃えをする為のcss」が分かりにくいようなので、
サンプルソースを作成してみました。
—-CSS—-
div.sample1 div{
display:table-cell;
width:100px;
margin-bottom:1px;
vertical-align:middle;
}

* html div.sample1 div{/* IE 6 */
display:inline; zoom:1;
}

*:first-child+html div.sample1 div{/* IE 7 */
display:inline; zoom:1;
}

—-HTML—-
<div class=”sample1″>
<div> aaaa </div>
<div> aaaa<br /> aaaa </div>
<div> aaaa<br /> aaaa<br /> aaaa </div>
</div>