[html/css] 수직으로 가운데 정렬 방법 (다섯 가지)

 

 

[html/css] 수직으로 가운데 정렬 방법(다섯 가지)

 

html/css 배우면서 골치 아픈 부분 중 하나죠.

 

수평과 수직 중앙 정렬하는 방법이, 왜 이렇게 난해해야만 되는가 다시 한 번 의아해 하며

 

정리해 보았습니다.

 

 

수평 중앙 정렬 방법은 아래 글 참조해 주시고요.

 

div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬)

 

div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬)

 

[html/css] table 중앙 정렬하기

 

이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법) 

 

 

 

 

저작권 관련 공지 바로가기 !important

 

 

 

 

오늘 배워볼 부분은 수직으로 가운데 정렬하기입니다.

 

1. 인라인 요소와 인라인 블록 요소의 수직 중앙 정렬

 

2. table 수직 중앙 정렬

 

1. 2는 하기 링크 참조해주세요. 또 3번 이후를 잘 이해하기 위해서도 vertical-align 속성의 이해가 필요합니다.

 

vertical-align 속성 자세히 알기(수직 정렬)

 

 

3. 이미지 수직 가운데 정렬

 

(1) 이미지를 담을 div를 만들어 div에 line-height 속성 사용

 

(2) 이미지에 vertical-align: middle 적용

 

*line-height는 이미지 height보다 높아야 함.

 

img.htm

 

▶사용 예

 

html

<div id="content"><img src="tree.png"/></div>

 

 

 

css

#content{line-height: 200px;} #content img{vertical-align: middle}

 

 

 

▶실행화면입니다.

 

 

 

 

 

 

4. 한 줄 짜리 텍스트 수직 가운데 정렬

 

(1) 텍스트를 담을 div를 만들어  div에 line-height 속성 적용

 

(2) 필요하면 div에 height 값도 적용

 

*(1)의 line-height 값은 글자 크기보다 더 커야 함

*font 축약 속성을 사용할 경우, line-height 값을 지정하지 않을 경우

기본값 line-height: 1이 적용됨.

이를 방지하기 위해 font 축약 속성에서 line-height 값을 구체적으로 표시해주기.

 

one single text.htm

 

▶사용 예

 

html

<div id="content">  나무야 나무야  </div>

 

 

css

#content{line-height: 200px;}

 

 

▶실행화면입니다.

     

 

 

 

5. div 안에 여러 줄을 세로로 가운데 정렬하기

 

방법 하나 : table 수직 정렬과 같은 원리임.

 

(1) text가 들어간 부분을 자식 div로 만들고

(2) 위에 부모 div를 만들어

(3) 두 div를 table과 table cell로 만들어 vertical-align 속성을 적용

 

* ie 7 이전 버전에서는 이 속성값을 지원하지 않음.

* ie 7 이전 버전을 위해, 자식 div에 display: inline-block를 사용하는 방법이 있음.

 

div table.htm

 

 

▶사용 예

 

html

<div id="wrapper">   <div id="content">   내용<br/> 내용<br/> 내용<br/>   </div> </div>

 

  

css

#wrapper{display: table;} #content{display: table-cell; vertical-align: middle;}

설명

display: table 요소를 <table>처럼 만듬

display: table-cell  요소를 <td>처럼 만듬

*위 속성값은 ie7 이하 버전에서 지원하지 않습니다. 

*ie8은 doctype이 필요하며, ie9서부터는 이 속성값을 지원합니다.

 ▶실행화면입니다

 

방법 둘: position으로 수직 가운데 정렬하기

 

*text를 div로 둘러싸 그 div를 수직 정렬하는 원리*

(1) position으로 수직 가운데 정렬하려면 높이값을 알아야 합니다.

 

(2) 수직으로 div를 정 가운데(top: 50%) 둔 다음에 높이의 반값을 뺌

 

*글이 길이서 흘러넘치는 경우 overflow: auto하면 자동으로 스크롤바가 생김.

 

▶사용 예

 

html

<div id="content">   내용<br/> 내용<br/> 내용<br/>   </div>

 

 

css

#content { position: absolute; top:50%; height: 100px; margin-top: -50px; }

position2.htm

 

▶실행화면입니다.

 

위에서 본 방법은 세로로만 가운데 정렬된 것이고요, 가로까지 중앙 정렬하려면?

 

css

#content { position: absolute; top:50%; left: 50%; height: 200px; width: 200px; margin: -100 0 0 -100; }

position.htm

 

설명

top 50%는 세로로 정 가운데

left 50%는 가로로 정 가운데

height: 200px은 div의 높이

width: 200px은 div 너비

margin: 위 오른쪽 아래 왼쪽 순임.

첫번째 -100은 높이의 반값

네번째 -100은 너비의 반값

 

 

 

방법 셋. position으로 수직 가운데 정렬하기

(1) div를 상하좌우로 잡아당긴 후

(2) 높이값을 주고

(3) margin: auto로 자동 정렬

 

*ie7 이하에서 작동하지 않음.

*글이 길이서 흘러넘치는 경우 overflow: auto

 

▶사용 예

stretch.htm

 

html

<div id="content">   내용<br/> 내용<br/> 내용<br/>   </div>

 

 

css

#content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 10%; margin: auto; }

 

 

 

▶실행화면입니다.

 

「참조 사이트」

 

http://www.vanseodesign.com/css/vertical-centering/

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

 

 

 

[html/css] line-height 속성 배우기

 

display 속성 (inline, block, none, inline-block 차이)

 

position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)

 

margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)