DIV 세로 중앙 정렬

DIV 세로 가운데 정렬
DIV 세로 정렬 중간
DIV vertical-align middle

1 예시: img를 이용한 트릭

<!DOCTYPE html>
<meta charset="utf-8" />
<title>테이블 DIV 세로 중앙</title>
<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>

예제: http://jmnote.com/css/div-middle-trick.php

2 같이 보기