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