以下に、記事の内容と一致する英語の質問と回答のタイトルをいくつか示します。 1. **「margin: auto」がインラインブロック要素で機能しないのはなぜですか?** 2. **「margin: auto」を使用せずにインラインブロック要素を中央に配置する方法** 3. **Inline-BL で Margin: Auto が失敗する理由-CSSチュートリアル-php.cn

以下に、記事の内容と一致する英語の質問と回答のタイトルをいくつか示します。 1. **「margin: auto」がインラインブロック要素で機能しないのはなぜですか?** 2. **「margin: auto」を使用せずにインラインブロック要素を中央に配置する方法** 3. **Inline-BL で Margin: Auto が失敗する理由

Barbara Streisand

リリース： 2024-10-26 04:29:02

オリジナル

883 人が閲覧しました

以下是几个符合文章内容的英文问答类标题：

1. **Why Doesn't `margin: auto` Work on Inline-Block Elements?**
2. **How to Center Inline-Block Elements Without `margin: auto`?**
3. **Why Does Margin: Auto Fail for Inline-Block Elements and How to Fix It?**
4. **Centering Inlin

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

CSS では、要素の周囲に均等な空白を作成するために margin: auto プロパティが使用されます。ただし、この属性をインラインブロック要素に適用すると機能しない場合があります。これは、インラインブロック要素がテキスト要素と同じようにページ上を流れるためです。

display: inline-block スタイルを要素に割り当てると、要素は 1 つの単語または画像としてページ上に流れ始めます。したがって、要素自体が水平方向のスペース全体を占有していないため、margin: auto は均一な空白を作成できません。

この問題を解決するには、インラインブロック要素を直接中央揃えにするのではなく、コンテナ要素の配置を中央に設定する (text-align: center) 必要があります。コンテナ要素は水平方向のスペース全体を占め、その中のインラインブロック要素が中央に配置されます。

修正されたコード例:

<code class="css">#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}
.MtopBig {
    margin: 75px auto;
    position: relative;
}
.center {
    text-align: center;
}</code>

ログイン後にコピー

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

ログイン後にコピー

このメソッドを使用すると、margin: auto 属性によって直接制御されなくなっても、インラインブロック要素は正常に中央に配置されます。

以上が以下に、記事の内容と一致する英語の質問と回答のタイトルをいくつか示します。 1. **「margin: auto」がインラインブロック要素で機能しないのはなぜですか?** 2. **「margin: auto」を使用せずにインラインブロック要素を中央に配置する方法** 3. **Inline-BL で Margin: Auto が失敗する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。