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;
} 

 

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

 

 

]]>

いいね、シェア、フォロー歓迎!2020テーマは「自然から学び自然と共に生きる」