Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

div를 센터정렬 하기

전에는 table로 레이아웃을 잡았기 때문에 테이블을 센터정렬하면 쉽사리 해결되어서 이것때문에 고민해 본적이 없는데 이젠 레이아웃을 div로 잡으니까 웹페이지 자체를 중앙에 나타나게 하려니까 정렬이 먹지 않았다. text-align같은 걸로는 div가 정렬되지 않았는데 인터넷에서 많은 얘기들이 있었는데 이것저것 다 달라서 적용하는데 약간 애먹었다.

사용자 삽입 이미지


결론은 상당히 쉽다. 웹페이지 레이아웃을 잡으려면 전체를 묶는 div가 있어야 하니까 가장 외부의 레이아웃을 잡는 div에


margin: 0 auto;

margin을 위에처럼 주면 된다.


margin을 주었을때는 순서가 Top, Right, Bottom, Left 순으로 작성되므로 위처럼 축약형태는 결국

margin: 0 auto 0 auto;

와 같은 형태가 되고 Top, Bottom은 여백은 0을 주고 Left, Right는 auto로 준다는 뜻이고 이렇게 하면 좌우가 자동으로 먹어서 div가 센터에 정렬된다.
2008/04/08 15:04 2008/04/08 15:04