インラインブロック要素を水平方向に「margin: auto;」中央揃えにしないのはなぜですか?

マージン:自動; Inline-Block 要素内

margin:auto を適用する場合。インラインブロック表示の div に変更すると、期待どおりに div が水平方向に中央に配置されない場合があります。これは、インライン ブロック要素がインライン要素のように動作し、ページに沿って流れるために発生します。

提供されたコード内:

古いコード (動作)

<code class="css">#container {
  width: 200px;
  ...
}</code>

div には特定の幅が与えられ、親コンテナ内に収まるようにします。

新しいコード (機能しません)

<code class="css">#container {
  display: inline-block;
  ...
}</code>

設定display: inline-block では、div がその内容に応じて縮小したり拡大したりするため、不適切な配置が発生します。

div を中央に配置するには、コードで以下が必要です。

Solution

1. text-align: center; を追加します。

<code class="css">.center {
  text-align: center;
}</code>

これにより、インラインブロック div が中央に配置されます。

<code class="html"><div class="center">
  <div class="MtopBig" id="container">...</div>
</div></code>

以上がインラインブロック要素を水平方向に「margin: auto;」中央揃えにしないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。