CSS를 하면서 의외로 가운데 정렬을 제대로 못해서 골머리를 썩히고 계신분들이 많은것 같습니다. 저도 이걸 배우기전에는 어떻게 해야할지 머리가 아팠었는데요 알고 부터는 아무것도 아닌것에 힘이 쫙~ 빠지더라구요.
css 가운데 정렬 살펴보기
우선 가운데 정렬을 위해서 기존에 쓰던 태그 <center>에 대해서 잠깐 살포보도록 하겠습니다. CENTER의 경우 웹표준전에 가운데 정렬 기능을 가진 태그로서 문단의 가운데 정렬을 사용했었는데, CSS와 HTML의 분리로 인해서 웹표준에 어긋나 제대로 쓸 수 없게 되어 버렸습니다. CSS의 가운데 정렬은 바로 text-align 이라는 속성입니다.
TEXT-ALIGN 속성은?
text-align:left;
text-align:center;
text-align:right;
이런식으로 속성을 주어서 사용을 하며, 여기에 해당되는 건 DIV나 SPAN 태그안의 글자가 적용을 받습니다.
CSS를 배우시면서 제일 힘들어 하시는분들이 DIV 태그를 마음대로 이동을 하거나 배치를 하는 부분인데 이부분도 나중에 따로 글을 남겨 보도록하겠습니다. 그럼, DIV 태그를 가운데로 정렬하려면 어떻게 할까요?
DIV 태그의 경우 text-align 속성이 먹질 않습니다. CENTER 태그를 쓰면 간단하게 해결하겠지만 이걸 쓰면 안되거든요...
DIV 태그 가운데 정렬 방법
DIV 우선 가운데 정렬할 태그를 바깥에서 깜싸주어야 태그 속성을 정할 수가 있습니다. 그래서 보통 wrap이라는 속성을 주고 DIV를 감싸주게 됩니다.
<div id="wrap">
<div>가운데정렬할 내용</div>
</div>
그럼 CSS상에서는 이렇게 처리하면 됩니다.
#wrap{margin : 0 auto;}
margin 을 0 으로서 자동으로 잡았는데 이건 가운데 정렬을 해라는 뜻으로 해석하셔도 무방합니다.
