コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS の無効な margin:0 auto の解決策

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

黄舟
リリース： 2017-07-21 13:41:34
オリジナル
5139 人が閲覧しました

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

1

2

3

<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を設定する以外に中央揃えになりません。

1

2

3

4

5

6

7

8

9

<!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 の解決策

テキストを中央揃えにしたい場合は、 .tcenter{text-align:center} を設定するだけです

margin:0 auto は、テキストではなく div です。

以上がCSS の無効な margin:0 auto の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
auto css margin
前の記事：CSSのauto属性の使い方を詳しく解説 次の記事：css:margin:0 auto は Ie8 では中央に配置できません
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
この場合の left と margin-left の違いは何ですか?
から 1970-01-01 08:00:00
0
0
0
`margin` 属性を `fixed` 要素と `z-index: 1` に適用します。
から 1970-01-01 08:00:00
0
0
0
margin:5px 0px 0px 5px なんで、右と下の距離がすごく離れているのに、まだ0pxなんです。
から 1970-01-01 08:00:00
0
0
0
親要素の高さを設定したにもかかわらず、依然として垂直方向の中央揃えを実現できないのはなぜですか?
から 1970-01-01 08:00:00
0
0
0
プレイスアイテムが無効になる問題
から 1970-01-01 08:00:00
0
0
0
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート