CSSで全体を中央揃えにする方法

通常、Web ページのメイン コンテンツ レイアウトはブラウザーの中央に配置されます。たとえば、PHP 中国語 Web サイトのメイン ページは中央揃えのレイアウトです。

CSS を使用して Web ページ全体のレイアウトを中央に配置するにはどうすればよいですか?レイアウトを中央揃えにする条件は何ですか?

まず、本文の CSS コンテンツの中央揃えスタイル (css text-align:center) を設定し、次に最も外側の DIV をレイアウトするときに margin:0 auto を使用する必要があります。オブジェクトのレイアウトが中央に配置されます。

もちろん、box オブジェクトには margin:0 auto を使用します。一部のブラウザでは、body オブジェクトに text-align:center スタイルが追加されず、レイアウトは依然として中央に配置されます。これは、デフォルトのスタイルがブラウザごとに異なります。本文に text-align:center を設定しないと、一部のブラウザ レイアウトは中央に配置され、一部は左側に配置され、レイアウトの互換性が生じます。

説明: margin: 0 auto。これは、オブジェクトの上下の間隔が 0、左右の間隔が自動、左右の間隔がオブジェクトの幅に応じて自動であることを意味します。 .

Web ページ レイアウトの中央揃え条件

1. CSS コンテンツの中央揃えスタイル text-align:center を本文に設定します。コード: body{text-align:center }

2. 最も外側のオブジェクトに margin:0 auto スタイルを設定します。コード: .php{margin:0 auto}

ケース:

レイアウトの中央揃え効果を確認するために、CSS の名前付きオブジェクトは「.php」で、CSS の境界線を黒、CSS の幅は 400 ピクセル、CSS の高さは 100 ピクセルに設定します。

1. CSS コードは次のとおりです:

2. HTML コード スニペット:

オブジェクトの php レイアウトは中央揃えです

以上がCSSで全体を中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。