スポンサーリンク
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; }
この様に記述しておけば、全てのブラウザで真ん中(センタリング)表示できます。
スポンサーリンク
1 Response