CSSを使用して固定幅レイアウトのドキュメントをセンタリングする

固定幅のレイアウトは、一般的なブラウザのいくつかを中心にするのが難しいかもしれませんが、数行のコードで可能です。

ここでの方法

  1. HTMLエディタでCSSスタイルシートを使用して新しいWebページを作成します。
  2. ページ上のすべての要素を保存するdiv要素をメイン要素として作成します。
  3. そのdiv要素にページ上で一意のIDを付けます。
  4. CSSスタイルシートを開き、div要素の幅を設定します。 div#main {width:750px; }
  5. divの中央に自動マージンを追加します。 div#main {width:750px; margin-left:auto; margin-right:auto}
  6. Netscape 4とIE 4 - 6( quirksモード )を修正するには、本文にtext-alignを追加します。 本文{text-align:center; }
  7. しかし、内側のすべてのテキストが中央に配置されているので、text-align:leftを追加して#main divのテキストを整列させます。 そこで。 div#main {width:750px; margin-left:auto; margin-right:auto; text-align:left; }
  8. あなたのページとあなたのスタイルシートを保存します。
  9. いくつかのWebブラウザーでテストします。

先端

これにより、レイアウトボックスは中央に配置されますが、その中のコンテンツは配置されません。 text-alignを使用して内部コンテンツを中央に配置します。