CSS에서 DIV 중앙정렬

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;  
}

[출처] DIV 중앙정렬 완벽 해결법|작성자 zazac


 

OutLine이라는 클래스를 가진 DIV안에 Div가운데 정렬 시키기

 

- 소스

<div class="OutLine">    <div class="contents">      <img src="http://static.naver.com/www/u/2010/0611/nmms_215646753.gif">    </div> </div>

 

 

 

CSS설정

.OutLine{  border:2px solid #ff6600;  width:1000px;  text-align:center;  padding:50px; } .contents{  border:2px solid #ff6600;  width:500px;  text-align:left;  display:inline-block;  _display:inline;  _zoom:1; }

 

IE6,7에서 inner DIv의 위치를 전달하기 위한 Hack 

 _display:inline;
 _zoom:1;

[출처] <css> Div 안에 Div 가운데 정렬|작성자 아직은