CSS の無効な margin:0 auto の解決策-CSSチュートリアル-php.cn

CSS の無効な margin:0 auto の解決策

黄舟

リリース： 2017-07-21 13:41:34

オリジナル

5008 人が閲覧しました

CSSの無効なmargin:0 autoの解決策

<div class="div1" style="width:100%; height:60px; float:left; background:#CCC;">
<div class="div2" style="width:auto; height:100%; margin:0 auto; background:#F00;">111111111</div>
</div>

ログイン後にコピー

div1の幅は画面の幅で、div2の幅はコンテンツのサイズに依存し、div1の中央に配置されますが、div2の幅をautoに設定した後、幅はまだ div1 の幅の 100% です。なぜこのようなことが起こるのでしょうか?一晩中調べていますが、まだわかりません。誰かが答えてくれることを願っています。

div3 を div2 の外側に配置し、div3 を水平方向の中央に設定します (つまり text-align:center)。 div2 をインライン要素に設定します (つまり、display:inline)。

CSS の無効な margin:0 auto の解決策

Div のデフォルトはブロックレベルの要素で、ブロックレベルの要素はすべて単独で 1 行を占め、幅のデフォルトは 100% です。

このコードをIE8で実行すると、本文にtext-align:centerを設定する以外に中央揃えになりません。

<!doctype html><html>
    <head>
        <style>
            .tcenter{                width:500px;                margin:0 auto;
            }        </style>
    </head>
    <body>
        <div class="tcenter">没有居中。。</div>
    </body></html>

ログイン後にコピー

個人的に IE8 をテストしたところ、中央揃えに問題はありませんでした

CSS の無効な margin:0 auto の解決策