「margin: 0 auto」が要素を中央に配置しないのはなぜですか?

Margin: 0 Auto が要素の中央に配置されない理由

margin: 0 auto プロパティを使用して要素を水平方向に整列させようとすると、親ではなく、中央に配置する要素の幅を指定することが重要ですelement.

次の状況を考えてみましょう: 幅が定義された親コンテナ要素 (#header) と、その中に順序なしリスト (

) があります。
要素は、margin: 0 auto を適用して #header div 内で水平方向の中央に配置する必要があります。ただし、
の幅を指定しない場合は、

この問題を解決するには、

#header ul {
  margin: 0 auto;
  width: 90%;
}

要素に width プロパティを追加します。要素、例:

これにより、

に 90% の幅が割り当てられます。 レイアウト改善のための更新された CSS (編集):

#header ul {
  list-style: none;
  margin: 0 auto;
  width: 90%;
}

#header ul li {
  color: #CCCCCC;
  display: inline;
  font-size: 20px;
  padding-right: 20px;
}

これらの改訂されたスタイルにより、要素が中央に配置され、そのリスト項目がインラインで表示されるため、float: left; の使用によって発生する問題が解消されます。

内でまた、古いバージョンの Internet Explorer で水平マージンが 2 倍になることを回避します。

以上が「margin: 0 auto」が要素を中央に配置しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。