Web 標準のページ レイアウトは、Div と CSS を使用して実装されます。最も一般的に使用されるのは、ページ全体を水平方向に中央寄せする効果です。これは、ページ レイアウトの基礎知識であり、最初にマスターする必要があります。しかし、依然としてこの質問がよく寄せられます。ここでは、Div と CSS を使用してページの水平方向の中央揃えを実現する方法を簡単にまとめます。
1. margin:auto 0 と text-aligh:center は、
最新のブラウザー (インターネットなど) で使用されます。 Explorer 7、Firefox、Opera など) 最新のブラウザで水平方向の中央揃えを実現する方法は非常に簡単で、左右のマージンを自動に設定するだけです。意味：
#wrap {マージン:0 自動;}
上記のコードは、ラップ div と左右の辺の間の距離が自動的に設定され、上限と下限の値が 0 (任意) になることを意味します。現在のコードを最新のブラウザ (Internet Explorer 7、Firefox、Opera など) で実行してください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#wrap {
幅:760ピクセル;
マージン:0 自動;
ボーダー:1px ソリッド #333;
背景色:#ccc;
}
</スタイル>
</head>
<本文>
<div id="ラップ">
Firefox などの最新のブラウザでページ要素の水平方向の中央揃えを設定するには、margin:0 auto; を指定するだけです。
<前>
div#wrap {
幅:760ピクセル;
margin:0 auto; /*0 には任意の値を指定できます*/
ボーダー:1px ソリッド #ccc;
背景色:#999;
}
</pre>
</div>
</body>
</html>
上記は非常にうまく機能します。ただし、これは Internet Explorer 6 以降では機能しませんが、幸いなことに、独自の回避策があります。 Internet Explorer では、text-align 属性は継承可能です。つまり、親要素に設定されると、デフォルトでこの属性が子要素に設定されます。したがって、body タグの text-align 属性値を center に設定すると、ページ上のすべての要素が自動的に中央に配置されます。同時に、ページ上のテキストを変更するフックも追加する必要があります。私たちが慣れている左揃えの読み方です。したがって、次のようなコードを記述する必要があります。
本文 {text-align:center;}
#wrap {text-align:left;}
このようにして、Internet Explorer で Div の中央揃えを簡単に実現できます。したがって、すべてのブラウザでセンタリング効果を表示するには、次のようにコードを記述します。
ボディ { テキスト整列:センター }
#wrap { text-align:left;
マージン:0 自動;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
ボディ { テキスト整列:センター }
div#wrap {
テキスト整列:左;
幅:760ピクセル;
マージン:0 自動;
ボーダー:1px ソリッド #333;
背景色:#ccc;
}
</スタイル>
</head>
<本文>
<div id="ラップ">
Firefox などの最新のブラウザでページ要素の水平方向の中央揃えを設定するには、margin:0 auto; を指定するだけです。
<前>
div#wrap {
幅:760ピクセル;
margin:0 auto; /*0 には任意の値を指定できます*/
ボーダー:1px ソリッド #ccc;
背景色:#999;
}
Internet Explorer 6 以前では、次の設定も行う必要があります。
ボディ { テキスト整列:センター }
div#wrap {
テキスト整列:左;
}
</pre>
</div>
</body>
</html>
ただし、ここには前提があります。つまり、中央の要素は固定幅でなければなりません。たとえば、ここでは 760 ピクセルに設定します。
2. 相対位置決めと負のマージン
ラップの相対位置決めを実行し、負のマージンを使用してオフセットをオフセットします。このメソッドは比較的シンプルで実装が簡単です。
#wrap {
位置:相対;
幅:760ピクセル;
左:50%;
マージン左:-380px
}
このコードの意味は、親要素の body タグを基準にしてラップの位置を設定し、その左境界線をページの中央に移動することです (つまり、left:50% の意味です)。中央の位置から左に移動します。水平方向の中央になるように、半分の距離後方にオフセットします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div#wrap {
位置:相対;
幅:760ピクセル;
左:50%;
マージン左:-380px;
ボーダー:1px ソリッド #333;
背景色:#ccc;
}
</スタイル>
</head>
<本文>
<div id="ラップ">
すべてのブラウザで機能するメソッド:
<前>
div#wrap {
位置:相対;
幅:760ピクセル;
左:50%;
マージン左:-380px;
ボーダー:1px ソリッド #333;
背景色:#ccc;
}
</pre>
</div>
</body>
</html>
同様に、水平方向のセンタリングを設定する前に、固定幅を設定する必要があります。
どの方法を選択しますか?
上記 2 つの方法のうちどちらが優れていますか?最初の方法は Hack テクノロジーを使用しているように見えますが、実際には使用されていません。これは、Web 標準の記述方法であり、仕様に完全に準拠しているため、2 つの方法のいずれかを選択して使用できます。 CSS ハックの問題です。
3. その他のセンタリング方法
上記はすべて、特定の幅を設定した場合の水平センタリングの実装です。場合によっては、柔軟なレイアウトを作成したい場合や、要素がコンテナー内にあるときに中央に配置したいだけで特定の幅を設定したくない場合があります。実際、これは真の中央揃えのレイアウトではなく、長さが 100% の要素の場合、中央揃えまたは左揃えと言えますか?したがって、高さと幅のないすべてのセンタリングは、真のセンタリングではありません。実際には、要素のパディングを使用してこのデザインを設定し、親要素のコンテナーのサイズを変更します。
中心を維持しながらラップ要素の長さをウィンドウに合わせて変更したい場合は、次のように記述できます。
体 {
パディング:10px 150px;
}
ここで必要なのは、親要素の左側と右側のパディングを等しく保つことだけです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<title>52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
体 {
パディング:10px 150px;
}
div#wrap {
ボーダー:1px ソリッド #333;
背景色:#ccc;
}
</スタイル>
</head>
<本文>
<div id="ラップ">
ブラウザのウィンドウ サイズに応じて変化する柔軟な中央レイアウト:
<前>
体 {
パディング:10px 150px;
}
ここで必要なのは、親要素の左側と右側のパディングを等しく保つことだけです。
</pre>
</div>
</body>
</html>
もちろん、これは単に「中央に配置されているように見える」だけですが、多くの場合非常に便利です。