`margin: 0 auto;` が 100% 幅の親内で要素を中央に配置しないのはなぜですか?

「margin: 0 auto;」で要素を中央揃えにする理由幅 100% 内で親が機能しない

問題の説明:

次のシナリオを考えてみましょう: 幅が 100% に設定され、順序付けされていない親 div があります。その中のリスト。 「margin: 0 auto;」を適用しました。

問題の原因:

問題の核心は、次の定義を行ったことにあります。中央に配置しようとしている要素ではなく、親 div の幅です。 「マージン: 0 auto;」の場合効果的に機能するには、中央に配置される要素の幅を指定する必要があります。

解決策:

この問題を修正するには、順序なしリストに幅を割り当てます:

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

追加考慮事項:

よりエレガントな外観を実現するには、次の改良点を考慮してください:

• 「float: left;」を削除します。このプロパティは、「display: inline」と競合し、IE6 以前のブラウザでは意図しないマージン 2 倍を作成するため、「li」要素からプロパティを削除します。
• 以下のスタイル プロパティを「li」要素に直接適用します。

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

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