css中margin:0 auto無效的解決辦法

來源:互聯網
上載者:User
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%的寬度,為什麼會這樣?研究了整晚都沒搞懂,希望有高手可以解答?

給div2外面套一個div3,設定div3為水平置中顯示,即text-align:center;div2設定為內嵌元素,即display:inline;這樣就可以啦。

  div預設為區塊層級元素,區塊層級元素都是獨自佔一行的,寬度預設為100%的。

在IE8下運行此段代碼 沒有置中 除了body設定text-align:center 還有其它解決方案嗎?

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

親測IE8置中沒問題

你要文字置中就設定.tcenter{text-align:center}

margin:0 auto; 是讓div置中的,不是讓文字置中的。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.