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

2015년 7월 19일 (일) 16:41 판

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

1 예시: line-height 이용

한줄일 경우만 가능

<style>
div {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	margin: 10px;
}
.box-a { background-color: red; }
.box-helloworld { background-color: orange; }
.box-multiline { background-color: yellow; }
</style>

<div class='box-a'>A</div>
<div class='box-helloworld'>Hello, World!</div>
<div class='box-multiline'>multiple<br>line</div>

예제: http://zetawiki.com/ex/css/div-middle-line-height.php

2 예시: 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://zetawiki.com/ex/css/div-middle-trick.php

3 같이 보기

@@ 23번째 줄: / 23번째 줄: @@
 <div class='box-multiline'>multiple<br>line</div>
 </source>
-*예제: http://jmnote.com/css/div-middle-line-height.php
+*예제: http://zetawiki.com/ex/css/div-middle-line-height.php
 ==예시: img 이용(트릭)==
@@ 45번째 줄: / 45번째 줄: @@
 <div class='div4'><img class='img4'/><span>bottom</span></div>
 </source>
-*예제: http://jmnote.com/css/div-middle-trick.php
+*예제: http://zetawiki.com/ex/css/div-middle-trick.php
 ==같이 보기==