css를-이용한-가운데-정렬방법

css를 이용한 가운데 정렬방법

작성일 2012.04.02 11:50

포지셔닝과 음수 마진값을 이용하여 전체내용을 가운데 정렬하는 방법

html문서를 작성합니다.

<body>태그 안쪽에 내용을 넣고 문서 전체의 내용을 div태그를 이용하여 감싸고 id값을 설정해 줍니다.

저는 id 값을 wrap으로 설정해보겠습니다.

html문서구조

<body>

</div>

</body>

위와 같은 문서 구조가 완성이 되었으면 css문서에 다음과 같이 설정합니다.

먼저 wrap의 너비폭을 지정합니다.

여기서 너비폭은 문서내용의 너비값을 넣어주시면됩니다.

그다음 positon속성값을 relative로 지정하고 left속성에 50%로 지정합니다.

이렇게 하면 warp의 왼쪽 끝이 페이지 중간에 오게 됩니다.

그다음 wrap문서의 너비폭의 값을 절반으로 나눈값을 음수margin값을 적용합니다.

이렇게 하면 문서의 정가운데 부분이 화면의 크기에 상관없이 화면중간에 위치하게 됩니다.

css문서

#wrap{

width: wrap문서 너비폭의 값;

position: relative;

left: 50%;

margin-left: -wrap문서 너비폭의 절반값;

}

또다른 방법

#wrap{

margin: 0 auto;

}

이처럼 2가지 방법이 있습니다. 용도에 맞게 알아서 쓰시면 될듯 ^^;