[Tip] CSS 가운데 정렬

[Tip] CSS 가운데 정렬

http://webdir.tistory.com/31

콘텐츠를 가운데 정렬하는 일은 굉장히 빈번한 일이다. 기억해 두자.~

인라인 요소는 text-align 속성을 이용해서 가운데 정렬이 가능하지만 블럭 요소들은 중앙 정렬되지 않는다.

고정폭의 블럭 요소 중앙 정렬

CSS

p {     width: 100px; /* 정렬하려는 요소의 넓이를 반드시 지정 */     margin: 0 auto; }

auto값은 요소 안의 마진 여백이 왼쪽 마진과 오른쪽 마진 사이에서 대등하게 나눠짐을 의미한다.

Quirks Mode를 대비한 중앙정렬은 아래와 같다.

CSS

body {     text-align: center; /* Quirks Mode 를 위한 가운데 정렬 */ }   p {     text-align: left; /* 문자들의 가운데 정렬을 해제 */     width: 100px;     margin: 0 auto; }

가변폭의 컨테츠를 중앙 정렬

ie8 이상, modern-browser를 위한 방법 

HTML

<div class="centered">     <div class="item">block item</div> </div>

CSS

.centered { display: table; margin-left: auto; margin-right: auto; }

가운데 정렬이 되는 것은 item 클래스의 요소이다. 인라인 요소도 가능

ie 6~7 호환

HTML

<div class="centeringContainer">     <span class="centered">         <span class="item" style="display:block">block item</span>     </span> </div>

CSS

.centeringContainer { text-align: center; } .centered { display: table; margin-left: auto; margin-right: auto; display: inline-block; }

가운데 정렬 시킬 대상은 item클래스의 요소이다. 
이 방법은 inline-block을 사용하는데 ie 6~7은 지원이 완벽하지 않아서 원래 inline인 요소에 한해서만 inline-block을 사용할 수 있다. 그래서 span 태그를 사용하여 item클래스의 요소를 감쌌으며 인라인 요소는 블럭요소를 포함할수 없다는 기본 문법에 따라 item클래스의 요소도 인라인 요소로 대체되었다.
 

centered 클래스에 display 속성이 두 번 사용되었는데 이 경우 마지막에 쓰여진 display: inline-block이 적용된다. 
단, Firefox 2에서는 inline-block을 이해하지 못하므로 그 전에 적힌 display: table이 적용된다.
그래서 inline-block을 지원하지 않는 브라우저는 display: table과 margin을 적용받아 가운데 정렬이 되고, 나머지 브라우저에서는 text-align: center와 display: inline-block이 적용되어 가운데 정렬이 된다.
  

포지션이 absolute일때 중앙 정렬

1. left:50% 으로 잡기

2. margin-left의 값을 정렬하려는 div등의 넓이값/2 나누고 - 값을 입력.

ex. div width:400px면 400/2 = 200을 마진값으로 설정 margin-left:-200px

페이지의 높이가 유동적으로 늘어나거나 줄어들기 때문에 요소안의 요소를 세로 중앙 정렬하는 것은 어려운 일입니다. 각각의 상황에 따라 알맞게 사용하기를 바랍니다.

테이블안의 요소 정렬

CSS

table { vertical-align: middle; }

div태그의 display속성을 table로 설정하는 방법

이렇게 함으로써 div태그에 table속성에 있는 vertical-align 속성을 설정할 수 있다.

HTML

<div id="wrapper">     <div id="cell">         <div class="content">Content goes here</div>     </div> </div>

CSS

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

absolute 속성을 이용하는 방법

이번에는 absolute속성을 이용하여 top속성에 50%를 주어 콘텐츠를 내리고 margin을 이용하여 콘텐츠 높이의 절반을 margin-top:-120px;이와같이 마이너스값을 이용한다. 그럼으로써 높이를 고정시킬 수 있다.

HTML

<div id="content">Content Here</div>

CSS

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

line-height 속성을 이용하는 방법

이 방법은 박스 안의 텍스트가 한 줄일 경우에만 유효하다. 박스의 높이값과 line-height를 동일하게 부여한다.

HTML

<div id="content">Content Here</div>

CSS

#content { height: 100px; line-height: 100px; }

이미지를 가운데 정렬 시키는 방법

이번 예제는 ie에서도 적용되는 예제이다.

HTML

<!--[if lt IE 8]> <style type="text/css">     .vCenter { position:relative; }     .vCenter span {         display:inline-block; position:absolute; top:50%; left:50%;     }     .vCenter span a {         position:relative; top:-50%; left:-50%;     } </style> <![endif]-->   <div class="vCenter">     <span>         <a href="#">             <img src="http://i1.daumcdn.net/cfs.tistory/static/images/xBoxReplace_250.png" alt="이미지" width="250" height="250">         </a>     </span> </div>

CSS

.vCenter { display: table; width: 400px; height: 400px; border: 1px solid red; }   .vCenter span { display: table-cell; text-align: center; vertical-align: middle; }

세로 정렬 출처

http://seye2.egloos.com/2295690

각종 세로 중앙정렬을 위한 방법을 소개한 곳

http://www.student.oulu.fi/~laurirai/www/css/middle/

---

DIV 중앙정렬 완벽 해결법

http://blog.daum.net/_blog/BlogTypeView.do?blogid=0AZTB&articleno=7529893&_bloghome_menu=recenttext

DIV 중앙정렬 완벽 해결법

지금 소개해드리는 코딩은 IE7과 FF2와 Opera9.25와 Safari3.0.4에서 모두 구현됩니다.
지식iN의 어떤 웹 디자이너가 답변한 것을 보고 배웠어요.
우리가 div를 배울 때 div의 스타일을 margin-left:auto; margin-right:auto;로 하거나, 좀 쉽게 하려면 margin:0 auto;로 놓으면 div가 브라우저의 가운데에 놓이게 된다고 배웠습니다. 제로보드 메뉴얼도 그렇고 팁 공유에 올라온 글들에도 그렇게 나오죠?
제 경우엔 IE에서 먹히지 않더군요. 나머지 브라우저들은 다 잘 보이더만.
그래서 찾다가 아래 방법을 찾았어요. 코딩은 직접 했습니다.

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

html에서 이렇게 하고 여기에 들어가는 css에서 다음과 같이 코딩합니다. 코드를 볼 때 이해가 가시면 이미 css초보는 면하신 것.
#align {   
width:100%;   
text-align:center;   
}   
  
#content {   
margin:0 auto; /*위에서 센터로 놨음에도 또 이걸 해 주는 건 IE외의 다른 브라우저에선 이게 없으면 다시 왼쪽으로 붙기 때문이에요*/  
width:750px; /*이건 임의값입니다. 쓰실 데로 수정하세요*/  
text-align:left;   
}

해 보세요. 죽입니다. 누군 지 아이디어 죽여요, 정말. 덕분에 머리에 쥐 나지 않았죠.ㅋ
여러분도 이 소스로 행복하시길!


댓글목록

 2008.01.23 21:18:35 비나무  
 부우우님, 제 댓글(http://www.zeroboard.com/zbxe_qna/16432039) 안 읽으셨군요... ^^;;
물론 위의 방법도 훌륭합니다.
하지만 부우우님의 방법이 잘못된 것이 아니었습니다. 하하...
그리고 위의 방법 말고도 중앙정렬이 되게 하는 방법은 있답니다. ^^

 2008.01.23 21:30:32 부우우  
다른 방법은 뭔가요? 참고로 그 글 읽고 답글을 달고 오는 길이에요.ㅋㅋ
아무튼 제가 틀린 건 아니였군요. 어쩌면 저만 문제였는 지도 모르죠.
음음, 다른 방법은 뭐에요?

 2008.01.23 21:38:37 부우우
  음, 그리고 혹시 alt 태그가 IE에서만 먹히는 건가요? 아니면 제가 뭔가 잘못한 걸까요? 마우스 가져다 대면 보통 alt에서 지정한 글이 떠야 하는 데 파폭과 오페라와 사파리에서는 뜨지 않네요.

 2008.01.23 23:13:58 비엔유
  IE에서 잘못된겁니다. alt속성으로 인해 툴팁이 뜨지 않는 파폭, 오페라, 사파리 쪽이 제대로 표현하고 있는겁니다.
툴팁을 표시하고자 하시면 title속성을 사용하시면 됩니다:)

 2008.01.24 08:51:42 부우우  
아하! 그렇군요! IE가 문제가 많네요.ㅋ

   2008.01.26 03:07:11 쌈쓰사마 
ㅎㅎ.. 그건 퀵모드로 했을경우 안먹힙니다
문서형식(DTD)을 알맞게 선언한 페이지라면 margin:0 auto; 가 먹히죠..
참고하세요^^

 2008.01.29 14:54:03 부우우 
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
이거 꼭 해야하더군요. 저도 비나무 님께 배웠답니다. html4.0에선 margin:0 auto;가 먹히지 않더라구요.ㅋ

 2008.01.27 16:14:31 neo
 개인적으로 이렇게 쓰고있거든요?

<div align="center">  
<div style="width:940px;text-align:left;">  
내용   
</div>  
</div>  
내용 
그냥 간단하게 이렇게 쓰면 안되나요?

 2008.01.29 14:05:34 레이딘
 CSS 스타일을 HTML상에서 곧바로 쓰는 것은 좋은 방법이 아닙니다. 꼭 필요하지 않다면 별도의 CSS 파일로 분리시키는게 좋습니다.

 2008.01.29 14:51:48 부우우
  align="center"는 가끔 파이어폭스 같은 브라우저가 무시할 수 있습니다. 왜 그런 지는 모르고요. 아무튼 IE에서만 align="center"가 잘 보이는 것 같더군요. 제가 문제가 난 것도 이것 때문이었고요. 음, div는 확인 안했지만 테이블은 그랬어요. 제가 관리하는 웹사이트도 이제 테이블에서 div로 바꿔가고 있지만.

 2008.01.29 22:49:16 종박이
 즉, 정리하자면
DTD를 정확히 설정합니다. (가능하면 XHTML을 추천해드립니다^^)
margin: 0 auto; 를 지정하시면 됩니다. (물론, width 값을 지정해주셔서 너비를 설정해주세요.)
IE에서도 margin: 0 auto; 가 지원됩니다.
그렇지만, DTD를 정확히 설정하셔야지만 작동합니다.
IE5 이하의 버전에서는 DTD를 정확히 설정해주어도 marggin: 0 auto;를 통한 엘리먼트 가운데 정렬이 안됩니다-_-;;
2008.01.29 22:54:35 종박이
 추가 Tip!
margin-left: auto; 를 하시면 박스(엘리먼트)가 오른쪽 정렬이 됩니다. margin-right: auto;를 하시면 왼쪽 정렬이됩니다.
margin-left 라고 해서 왼쪽정렬이 아닙니다. 오른쪽 정렬이 되신다는점 혼동 없으시기 바랍니다.
이 또한 width를 지정해주셔야 제대로된 효과를 보실수 있습니다.
이유인 즉, block 엘리먼트의 경우에는 기본적으로 width: 100%; 를 가지고 있으므로 가운데 정렬하나, 오른쪽 정렬하나 표시가 안납니다-_-;;

   2008.01.31 20:40:04 쌈쓰사마
 이건 첨 알았네요 ㅎㅎ 바로 해봐야겠네요 ㄳㄳ 합니다~

 2008.01.30 15:14:26 포이베
 DTD만 정확히 하시면, 위 소스에서  div id="content" 하나만 있어도 중앙정렬 잘 돼요.^^ (물론 CSS도^^)
IE6 이상, 그리고 그외 모든 표준 브라우저에서 가능합니다.

 2008.02.28 11:01:00 빽짱구
body { text-align:center; } /* IE 에서 가운데정렬을 하기 위한 코드 */
#wrapper {
widht:500px;
maigin:0 auto;
text-align:left; /* 이부분은 텍스트를 왼쪽으로 정렬시키는 역할 */
}

다른방법은
#wrapper {
widht;500px;
position:relative;
left:50%;
margin-left:-250px; /*가로사이즈의 절반수치 */

}

---

div 태그 screen 화면 중앙 center에 보여주기

http://aspdotnet.tistory.com/1015

---

div 중앙정렬

http://recollectionis.tistory.com/entry/w3c-div-center

align의 center가 되는 것은 block레벨이 아닌 것에만 적용이 된다.
div는 block 레벨이니 당연히 div 자체에는 align이 되지 않는다.
------------------------------------------------------------------------------------------
예제1
<style type="text/css">
#BoxCenter {margin:0 auto; width:300px; height:100px; background-color:#33CCFF;}
</style>
<div id="BoxCenter">중앙 정렬</div>
------------------------------------------------------------------------------------------
예제2
<style type="text/css">
#BoxCenter {width:400px; margin-right:auto; margin-left:auto; background:#666;}
</style>
<div id="BoxCenter">중앙 정렬</div>
------------------------------------------------------------------------------------------
예제1 처럼 div에 margin:0 auto; 
예제2 처럼 margin-right:auto; margin-left:auto; 하면 중앙정렬이 된다.