DIV 세로 중앙 정렬

by JM note

HTML

<style>
.div1 {height:200px;float:left;background:#aaa;}
.div2 {height:200px;float:left;background:#bbb;}
.div3 {height:200px;float:left;background:#ccc;}
.div4 {height:200px;float:left;background:#ddd;}
.img1 {height:200px;width:0;}
.img2 {height:200px;width:0;vertical-align:top}
.img3 {height:200px;width:0;vertical-align:middle}
.img4 {height:200px;width:0;vertical-align:bottom}
</style>

<div class='div1'><img class='img1'/><span>(기본값)</span></div>
<div class='div3'><img class='img2'/><span>top</span></div>
<div class='div2'><img class='img3'/><span>middle</span></div>
<div class='div4'><img class='img4'/><span>bottom</span></div>