Html & Script

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

페이지 정보

본문

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

 

 html문서를 작성합니다.

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

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

 

 html문서구조

 <body>

     <div id="wrap">

          <div id="contents_column">내용</div>

     </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가지 방법이 있습니다. 용도에 맞게 알아서 쓰시면 될듯 ^^;

관련자료

등록된 댓글이 없습니다.
Today's proverb
희생이란 미(美)라고 하는 글자가 보여주는 그대로 희생양(羊)이 클수록 아름다운 법이다. 곱하기가 쌓아올린 삶의 정상에서의 추락을 막아주는 것은 나누기(÷)의 삶뿐이다. (<들숨날숨 8월호> 김산춘신부님)