「margin: auto;」インラインブロック要素が中央に配置されないのはなぜですか?-CSSチュートリアル-php.cn

「margin: auto;」インラインブロック要素が中央に配置されないのはなぜですか?

Mary-Kate Olsen

リリース： 2024-10-25 11:01:30

オリジナル

316 人が閲覧しました

Why Doesn't `margin: auto;` Center Inline-Block Elements?

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

マージン自動に関しては、インラインブロック要素はブロック要素とは異なる動作をします。ブロック要素では、margin:auto;要素を親コンテナ内で水平方向の中央に配置します。ただし、インラインブロック要素では、margin:auto;は効果がありません。

例:

<code class="css">#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}</code>

ログイン後にコピー

この例では、コンテナ要素は inline-block として設定されます。 margin:auto の場合;が要素に適用されている場合、コンテナは親コンテナ内で中央に配置されません。

解決策:

インラインブロック要素を中央に配置するには、text- align: 親要素の中央に配置します。

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

ログイン後にコピー

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

ログイン後にコピー

これで、コンテナ要素が中央 div 内で水平方向に中央揃えになります。

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