[移転] Div+CSSチュートリアル：divの水平方向のセンタリングを実現する方法まとめcontainers_html/css

[移転] Div+CSSチュートリアル：divの水平方向のセンタリングを実現する方法まとめcontainers_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:30:32

オリジナル

784 人が閲覧しました

Web標準のページレイアウトはDivとCSSを使用して実装されます。最も一般的に使用されるのは、ページ全体を水平方向に中央寄せする効果です。これはページレイアウトの基礎知識であり、最初に習得する必要がある最も重要な知識です。しかし、依然としてこの質問はよく聞かれます。ここでは、Div と CSS を使用してページの水平方向の中央揃えを実現する方法を簡単にまとめます。 1. margin:auto 0 と text-aligh:center
最新のブラウザー (Internet Explorer など)。 7、Firefox、Opera など）最新のブラウザで水平方向の中央揃えを実現する方法は非常に簡単で、左側と右側の空白スペースを自動に設定するだけです。意味は、
#wrap { margin:0 auto;}
上記のコードは、wrap divから左右辺までの距離が自動的に設定され、上限値と下限値が0（任意）になることを意味します。。現在のコードを最新のブラウザ (Internet Explorer 7、Firefox、Opera など) で実行してください:

Firefox などの最新のブラウザでページ要素の水平方向の中央揃えを設定します。 , margin:0 auto; と指定するだけです

div#wrap {width:760px;margin:0 auto; /*这里的0可以任意值*/border:1px solid #ccc;background-color:#999;}

ログイン後にコピー

上記は非常にうまくいきます。ただし、これは Internet Explorer 6 以降では機能しませんが、幸いなことに独自の回避策があります。 Internet Explorer では、text-align 属性は継承可能です。つまり、親要素に設定された後、デフォルトで子要素に設定されます。したがって、body タグの text-align 属性値を center に設定すると、ページ上のすべての要素が自動的に中央に配置されます。同時に、ページ上のテキストをに変更するフックも追加する必要があります。私たちが慣れ親しんでいる読み取り方法 - 左揃え。したがって、次のようなコードを記述する必要があります:
body {text-align:center;}
#wrap {text-align:left;}
このようにして、Internet Explorer で Div の中央揃えを簡単に実現できます。したがって、すべてのブラウザでセンタリング効果を表示するには、次のようにコードを記述します。

Firefox などの最新のブラウザでページ要素の水平方向の中央揃えを設定するには、 margin:0 auto を指定するだけです。要素の幅は固定でなければなりません。たとえば、ここでは 760 ピクセルに設定します。
2. 相対位置決めと負のマージン
ラップの相対位置決めを実行し、負のマージンを使用してオフセットをオフセットします。このメソッドは比較的単純で実装が簡単です:
#wrap {
position:relative;
left:50%;

margin-left:-380px
}
このコードの意味は、ラップを設定することです。位置は親要素の body タグを基準にして、その左境界線がページの中央に移動されます (つまり、left:50% の意味)。最後に、左に半分の距離だけオフセットします。中間位置からの水平センタリングを実現。

すべてのブラウザで動作するメソッド:

div#wrap {width:760px;margin:0 auto; /*这里的0可以任意值*/border:1px solid #ccc;background-color:#999;}在Internet Explorer 6 及以下的版本中我们还要做以下的设置：body { text-align:center; }div#wrap {text-align:left;}

ログイン後にコピー

同様に、水平方向のセンタリングを設定する前に固定幅を設定する必要があります。
どの方法を選択しますか？
上記の 2 つの方法のうちどちらが優れていますか?最初の方法は Hack テクノロジーを使用しているように見えますが、実際には使用されていません。これは、Web 標準の記述方法であり、仕様に完全に準拠しているため、2 つの方法のいずれかを選択して使用できます。 CSS ハックの問題です。
3. その他のセンタリング方法
上記はいずれも特定の幅を設定した場合の水平センタリングの実装です。場合によっては、柔軟なレイアウトを作成したい場合や、要素がコンテナー内にあるときに中央に配置したいだけで特定の幅を設定したくない場合があります。実際、これは真の中央揃えのレイアウトではなく、長さが 100% の要素の場合、中央揃えまたは左揃えと言えますか?したがって、高さや幅が広くないセンタリングは真のセンタリングではありません。このデザインを設定するために要素のパディングを使用します。実際、親要素のコンテナーのサイズを変更します。
中心を維持しながらラップ要素の長さをウィンドウに合わせて変更したい場合は、次のように記述できます。 :
body {

padding:10px 150px;
}
ここでは、親要素の左側と右側のパディングを同じにするだけで済みます。

ブラウザウィンドウのサイズに応じて変化する柔軟な中央配置レイアウト:

div#wrap {position:relative;width:760px;left:50%;margin-left:-380px;border:1px solid #333;background-color:#ccc;}

ログイン後にコピー

もちろん、これは単に「中央に配置されているように見える」だけですが、多くの場合非常に便利です。

?