[CSS] FireFox 에서 가운데 정렬하기(text-align:center) 위한 3가지 방법

우선 아래 코드는 IE 에서는 아주 잘 실행되지만, FF 에서는 가운데 정렬이 안됩니다.
이를 해결하기 위한 방법으로는 3가지가 있는데 사실상 CSS 로 해결하는게 가장 보편적이고 편하겠죠.

<DIV class="container">
    <DIV class="contents">
        contents
    </DIV>
</DIV>

1. FireFox 용 속성을 이용하는 방법
   대부분의 경우에 가장 편하게 쓸 수 있는 방법입니다. 상위 객체에 속성을 주면 하위 객체 모두를 가운데 정렬 시킬 수 있기 때문에 편합니다.
   

   <style>.container {
       text-align:-moz-center;/* FF */
       text-align:center;/* IE */
       border:2px solid RED;
   }
   .container .contents {
       border:2px solid BLUE;
       width:200px;
   }
   </style>

   
   
2. 'margin' 을 이용하는 방법
   이 경우 정렬 대상이 되는 객체에 속성을 주어야 합니다. 여러 객체를 가운데 정렬 시킬때는 오히려 불편하겠죠.
   단, 정렬대상이 DIV 인 경우 DIV 가 'text'가 아니므로 이 방법을 사용해야 제대로 정렬이 됩니다.
   

   <style>.container {
       border:2px solid RED;
   }
   .container .contents {
       margin:0 auto 0 auto;/* 가운데 정렬 */
       border:2px solid BLUE;
       width:200px;
   }
   </style>

   
   
3. <center> 테그를 이용하는 방법
   CSS 는 크게 손댈일은 없지만 HTML 코드를 손봐야 하는 단점이...;
   

   <DIV class="container">
       <center>
           <DIV class="contents">
               contents
           </DIV>
       </center>
   </DIV>