CSS 정렬에 있어서 각 요소의 width, height 값은 중요합니다. 이들이 없으면 상호간 정렬 또는 위치를 잡는데 애를 먹게 됩니다.
parent라는 class를 가진 부모 DIV 앨리먼트가 child라는 class를 가진 자식 DIV 앨리먼트를 감싸고 있다고 가정합니다.
이때 흔히 고민하는 부분이 자식 앨리먼트를 어떻게 하면 center 정렬을 시킬 수 있을까 일겁니다.
text-align? margin? padding?
요소를 정렬시키는데 있어 위 모두 사용할 수 있는 녀석들입니다. 하지만 그 이전에 각 요소의 사이즈를 정의해줘야 합니다. 사이즈를 지정하지 않고도 문제가 없다면 다른 브라우저로 테스트 해보십시오. 위치나 사이즈가 일그러지는 모습을 볼 수 있습니다.
parent 클래스를 가진 부모 DIV에는 width:100%을 줍니다. 그리고 child 클래스를 가진 자식 DIV에는 의도하는 가로 사이즈를 정의합니다. (width: 300px)
그리고나서 parent 클래스에 text-align:center와 margin:0 auto; 를 적용해주면 됩니다.
text-align:center;는 IE에서만 동작합니다. 나머지 브라우저에서는 Text에만 대응하죠. 그리고 margin:0 auto는 IE 외 나머지 브라우저에서 동작합니다. 즉, 이 둘은 같이 한 쌍이 됩니다.
.parent {width:100%; text-align:center; margin:0 auto;}
.child {width:300px;}
정리하면 위와 같이 CSS가 만들어집니다. 여기서 한가지 문제는 parent의 text-align:center가 그대로 child의 속성에 까지 영향을 준다는 것입니다. child에 텍스트를 넣게 되면 center 정렬이 된다는 의미입니다.
그렇다면 child에 한가지 추가를 해줘야 합니다.
.parent {width:100%; text-align:center; margin:0 auto;}
.child {width:300px; text-align:left;}
child에 text-align:left;를 넣어줍니다. 이렇게 되면 child안에 텍스트들은 부모 CSS의 center 정렬에 영향을 받지 않게 됩니다.