インラインブロック要素で「margin: auto;」が機能しないのはなぜですか?

マージン:自動;インラインブロック要素では機能しません

CSS では、margin:auto;は、ブロック要素をページ上で水平方向に中央揃えするためによく使用されます。ただし、インライン ブロック要素に適用すると、このプロパティは無効になります。

インライン ブロック要素は、インライン要素と同様にページにインラインで流れ込みますが、特定の幅と高さを持つことができます。この動作により、margin:auto; を使用して水平方向に中央揃えにしようとするときに問題が発生します。

古いコード:

<code class="css">#container {
    /* Other styles... */
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}</code>

このコードでは、#container 要素に

新しいコード:

<code class="css">#container {
    /* Other styles... */
    display: inline-block;
}
.center {
    margin: 75px auto;
    position: relative;
}</code>

#container の表示プロパティを inline-block に変更すると、マージンとのやり取りが変わります。インライン ブロック要素はブロック要素として動作せず、margin:auto; を使用して中央に配置する機能が失われます。

解決策:

インライン ブロック要素を中央に配置するには水平方向に配置するには、代わりに、その要素を含む要素の text-align: center プロパティを使用します。

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

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

これにより、inline-block 要素がその要素を含むブロック要素の中央に位置合わせされます。

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