"DIV 세로 중앙 정렬"의 두 판 사이의 차이

2014년 5월 20일 (화) 22:11 판

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

1 소스 코드

<!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.php

2 같이 보기

@@ 27번째 줄: / 27번째 줄: @@
 ==같이 보기==
 *[[TD 세로 중앙]]
+*[[HTML div]]
 [[분류:CSS]]
 [[분류:HTML]]
 [[분류:DIV]]