<div>のCSS

margin:30px auto 30px auto;
padding:10px;
width:700px;
border:double 4px #000000;

 こちらはIE、Netscape7.1、Firefoxそれぞれに互換性のある中央寄せです。
 この二重線に囲まれた部分は上記CSSで制御した<div>でできています。
 ただ、これだけでは中央寄せになりません。
 <body>にも下記のCSSを書く必要があります。

<body>のCSS

margin:20px;
padding:0px;
text-align:center;

 ここで重要なのは、『text-align:center』です。
 実はIEは<body>にこれを書くだけでも中央寄せがなされます。
 しかし、Mozilla系のNetscapeとFirefoxは『text-align:center』だけでは中央寄せがなされません。
 <div>のCSSにある『margin:30px auto 30px auto』が必要です。
 ここでは上と下のmarginを30pxにしていますが、それはまぁ、別にどんな数値を入れても構いません。重要なのは右と左のmarginを『auto』にすることです。
 これにより、NetscapeとFirefoxでも左右の余白が『自動で調整されて』中央寄せがなされます。

 ただ、<body>に『text-align:center=テキストの中央寄せ』がかかっていますので、ここのようにテキストを左揃えにしたいときは、『text-align:left』をテキストの入るタグに書き忘れないようにしてください。

 非互換版(IEのみ中央寄せ)はこちら
 非互換版(Netscap7.1・Firefoxのみ中央寄せ)はこちら

 戻る