「margin: 0 auto;」が順序なしリストの中央に配置されないのはなぜですか?

Margin: 0 Auto で要素を中央に配置できないのはなぜですか?

ヘッダー内の順序なしリストを中央に配置しようとしていますマージンを使用した div: 0 auto。ただし、マージンオートだけではセンタリングには不十分です。その理由は次のとおりです。

マージン Auto について

margin: 0 auto は、左右のマージンを auto に設定し、要素が水平方向の中央に配置されます。ただし、これは要素の幅が明示的に定義されている場合にのみ機能します。

コード内:

#header ul {
  margin: 0 auto;
}

ヘッダー div の幅を定義しましたが、順序なしリストの幅ではありません。したがって、margin: 0 auto はリストの中央揃えに影響しません。

解決策:

リストを中央に配置するには、リストの幅を明示的に定義する必要があります:

#header ul {
  margin: 0 auto;
  width: 620px;  // or any desired width
}

追加の考慮事項:

場合リスト内のリスト項目などの要素を水平方向に中央揃えにしたい場合は、幅を定義して、display: inline または float: left を使用します。ただし、浮動要素は予期しない動作をする可能性があるため、通常はインラインを使用することをお勧めします。

たとえば、リスト項目を中央に配置するには:

#header ul li {
  display: inline;
}

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