margin: 0 auto; 가운데 정렬이 되지 않을 때

가운데 정렬을 하는 방법은 여러가지가 있는데 나는 그 중에서도 text-align:center; 와 margin: 0 auto;를 가장 많이 사용하는 편이다. 그런데 간혹 margin:0 auto;를 적용해도 가운데 정렬이 되지 않을 때가 있다. 이러한 상황에서 체크해 볼 수 있는 세가지 방법에 대해서 소개하도록 하겠다.

 

 

margin: 0 auto; 가운데 정렬이 되지 않을 때 해결방법

1. 가장 첫번째로 해야 할 일은 <!Doctype ~>선언이 제대로 되었는지 확인해보아야 한다.

 

2. auto는 자동으로 사이즈를 설정해주는 것이다. 그러므로 가로폭의 사이즈를 정확하게 인식할 수 있어야 정렬이 가능하다. margin: 0 auto; 가 반응하지 않을 때에는 해당 영역의 가로 사이즈가 제대로 설정되어 있는지 확인해보고, 만약 되어 있지 않다면 width 태그를 이용해서 가로 사이즈를 지정해주도록 한다.

 

3. margin: 0 auto; 는 inline 속성에서는 적용되지 않는다. inline 속성은 자기 자신 만큼의 영역값(width, height)을 갖기 때문이다. 이러한 경우에는 inline 속성의 태그가 아닌 block 속성의 태그로 바꾸어 사용하거나 - 예를 들자면, span 태그 대신에 div 태그를 사용함 - 해당 요소의 display 속성을 block으로 바꾸어 주는 것도 해결방법이다.