DIV 水平センタリングの CSS コントロールについて_html/css_WEB-ITnose

DIV の水平方向のセンタリングを制御する CSS の問題に関しては、多くの初心者が混乱しているようです。私が初めて CSS を読んだのは外国人が書いた本で、センタリングの使用について書かれていたのを覚えています。

margin-left:auto;
margin-right:auto;

実際には、次と同じです:

margin:0 auto;

この方法は中央に配置されていないと感じる人もいます。 IEを使用する場合。 DTD 宣言が欠落していないか確認することをお勧めします。

＜!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”＞

非常に多いの人々が同様の間違いを犯しました!この方法も試行錯誤されていると言えますが、それでもうまくいかない場合もあります。そこで 2 番目の方法があります。

Margin-left:50%;
left: -width/2;

ここでの幅はCSSの幅ではなく、DIVの幅である場合は、次のように設定する必要があります。左: -384ピクセル。非常に良いことです。すでに 2 つの方法があり、遭遇する可能性のある問題は解決されていると言えます。

この2つだけでは不十分だと感じることもあります。一部のブラウザには対応しておりません。そこで私は、主に IE を考慮し、最初の方法に基づいた 3 番目の方法を見つけました。本体の設定が必要です。

body {text-align: center;}

このように、IEでも中央揃えになりますが、ページ内のすべてのテキストが中央揃えになり、見栄えが良くないという新たな問題が発生します。これは簡単に解決できます。 text-align: left およびその他の調整設定を DIV 定義に追加するだけです。

上記の文章は、食後の参考とスケッチです。実際の作業では誰でも注目できます！