div 중앙정렬 , div center

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

댓글 못 남기게 되어 있어서 url적어 둡니다.

 

 

 

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; /*가로사이즈의 절반수치 */
}