IE 때문에 미쳐...

그간 ranktoy.com 을 IE로 접속했을 때에 CSS3를 제대로 표현 하지 못한 것을 빼고도 이 애는 왜 또 좌측정렬을 하지? 에 대한 불만이 가득했다. 오늘 조금 시간이 생겨 자세한 내용을 인터넷을 통해 조사한 결과.

width의 크기를 특별히 정한 div의 경우  margin: 0 auto; 으로 중앙정렬을 잘 못하는 경우가 있을 것을 알게 되었다. 이런 경우 전체를 둘러싸는 wrapper div를 만들어서 거기에  text-align: center; 을 한 방 적어주면 가볍게 중앙정렬을 할 수 있다는 것을 확인...

대신 그 바로 안쪽의 Div에다가  text-align: left; 하는 것도 잊지 말자...

제 페이지에서 중앙정렬을 위해 적은 body와 wrapper div 소스를 잠깐 적어놓습니다.


body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background-color:#eeeeee;
 margin: 0 auto;
 text-align: center;

}


#wrapper {
 margin: 0 auto;
 width: 980px;
 position: relative;
 text-align: left;

}

이렇게 해서 중앙정렬 드디어 가능..^^

-----------------------------
RankToy.com - Click and cast Your vote
Fairedu.com - Photo card book for your children