지금 소개해드리는 코딩은 IE7과 FF2와 Opera9.25와 Safari3.0.4에서 모두 구현됩니다.

지식iN의 어떤 웹 디자이너가 답변한 것을 보고 배웠어요.

우 리가 div를 배울 때 div의 스타일을 margin-left:auto; margin-right:auto;로 하거나, 좀 쉽게 하려면 margin:0 auto;로 놓으면 div가 브라우저의 가운데에 놓이게 된다고 배웠습니다. 제로보드 메뉴얼도 그렇고 팁 공유에 올라온 글들에도 그렇게 나오죠?

제 경우엔 IE에서 먹히지 않더군요. 나머지 브라우저들은 다 잘 보이더만.

그래서 찾다가 아래 방법을 찾았어요. 코딩은 직접 했습니다.

view plaincopy to clipboardprint?
  1. <div id="align">  
  2. <div id="content">  
  3. 내용  
  4. </div>  
  5. </div>  

html에서 이렇게 하고 여기에 들어가는 css에서 다음과 같이 코딩합니다. 코드를 볼 때 이해가 가시면 이미 css초보는 면하신 것.ㅋ

view plaincopy to clipboardprint?
  1. #align {  
  2. width:100%;  
  3. text-align:center;  
  4. }  
  5.   
  6. #content {  
  7. margin:0 auto; /*위에서 센터로 놨음에도 또 이걸 해 주는 건 IE외의 다른 브라우저에선 이게 없으면 다시 왼쪽으로 붙기 때문이에요*/  
  8. width:750px; /*이건 임의값입니다. 쓰실 데로 수정하세요*/  
  9. text-align:left;  
  10. }  


해 보세요. 죽입니다. 누군 지 아이디어 죽여요, 정말. 덕분에 머리에 쥐 나지 않았죠.ㅋ

여러분도 이 소스로 행복하시길!
이 게시물을..
profile