ビジネスクラフト BUSINESS CRAFT

CSSで真ん中に配置（センターリング）する方法

XHTML

    <div class="main">  
        <h2>ブロックレベル要素をセンタリング</h2>  
        <p>ブロックレベル要素</p>  
    </div>  

CSS

    .main {  
        width: 100%;   
        margin: 0 auto;  
    }  

横幅を縮めて真ん中に配置するCSSコード

.main div   {  
    width: 80%;
    margin: 0 auto;  
}  

↑

classで指定した部分を真ん中にする時は「margin: 0 auto;」と指定。

auto非対応ブラウザの対応方法

IE（インターネットエクスプローラー）への対策

IE5.5やIE5ではauto非対応なので、対応させるためにこの様にCSS記述。

.main {  
    width: 100%;  
    border: 1px solid #000;  
    text-align: center;  
}  

横幅を縮めて真ん中に配置するCSSコード

.main {  
    width: 80%;  
    border: 1px solid #FF0000;  
    margin: 0 auto;  
    text-align: left;  
} 

この様に記述しておけば、全てのブラウザで真ん中（センタリング）表示できます。