CSS로 가변폭의 컨텐츠를 가운데 정렬하기

일반적으로 가운데 정렬은 width 값이 존재하고 margin값을 margin:0 auto;를 주어 정렬하곤 합니다.

하지만 width 값이 가변적으로 변경될 수 있다면 어떻게 정렬해야 할까요?

방법은 있습니다!!! 크게 2가지 방법을 알려 드리겠습니다.

1. display:table

<style type="text/css">
    .center-box{display:table; margin:0 auto; padding:30px; background:red;}
    .center-box .item{background:yellow;}
</style>
 
<div class="center-box">
    <div class="item">contents</div>
</div>

ex) 화면

contents

2. display:inline-block

<style type="text/css">
    .center-box2{text-align:center; background:red; padding:30px;}
    .center-box2 .item{display:inline-block; background:yellow;}
</style>
 
<div class="center-box2">
    <div class="item">contents</div>
</div>

ex) 화면

contents

3. Cross Browsing

display:inline-block 은 IE6 ~7에서 완변히(?) 지원하지 않습니다. 어떻한 예가 있냐하면

inline 태그에 한에 inline-block 속성이 적용되고 block 태그에는 inline-block 속성이 적용되지 않습니다.

또한,

firefox 2 에선 display:inline-block 을 이해하지 못합니다. 그래서 display:table 을 사용합니다.

그래서 해결 방법은 아래와 같습니다.

<style type="text/css">
    .center-box3{text-align:center; background:red; padding:30px;}
    .center-box3 .inline-box{display:table; margin:0 auto; display:inline-block;}
    .center-box3 .inline-box .item{display:block; background:yellow;}
</style>
 
<div class="center-box3">
    <span class="inline-box">
        <span class="item">contents</span>
    </span>
</div>

자세히 보시면 inline-box 클래스에 display 속성이 2번 들어 갑니다. 어짜피 실행되는 부분은 마지막 display 속성이 적용됩니다.

하지만 firefox2 에선 display:inline-block 을 이해하지 못함으로 display:table 가 적용 됩니다.

이렇게 되면 IE 와 firefox 2 에서 모두 같은 화면이 적용 됩니다.