DIV在IE中無法居中怎么解決

這篇文章主要講解了“DIV在IE中無法居中怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“DIV在IE中無法居中怎么解決”吧！

一、DIV水平組織居中先容

讓最外層DIV在IE閱讀器中水準居中，除了對其設置margin:0 auto外，一樣平常還要對body設置裝備擺設花樣，但一樣平常高版本IE瀏覽器沒必要配置此CSS樣式也能使DIV居中，低版本IE好比IE6和對標準相比嚴厲閱讀器須要配置text-align:center。

有時不經意對要居中的最外層設置裝備擺設float:left或float:right也是造成配置margin:0 auto布局不克不及水準居中緣故原由。

由于配置float是讓DIV浮動靠左或浮動靠右，你要讓DIV居中肯定必要設置margin:0 auto，這個時辰即是邏輯過錯了，即讓DIV靠左或靠右，又居中，這個明顯邏輯錯誤。所以要讓最外層DIV水平居中于閱讀器中，就100%不能同時使用float，必須要應用margin:0 auto格局。

二、CSS5總結下最外層DIV盒子水準機關居中前提

1、不能運用float（不管float:left與float:right都不克不及運用）
2、對body配置text-align:center，以便兼容低版本和高版本閱讀器
3、對最外層DIV配置margin:0 auto，兼容各大涉獵器程度居中樣式

三、CSS5小實例說明

要是最外層DIV的CSS class定名為“main”，為了看到居中功效，對此盒子配置css寬300px、css高100px、赤色邊框，讓其居中。

此實例是在CSS5初始化模板根柢上完成，以便更好兼容各大閱讀器，倡始不管現實照舊做項目，各人都可使用CSS5供應初始化模板根抵上拓荒制作，減少差錯與增強CSS兼容性。

1、殘缺實例DIV+CSS代碼
1）、關鍵CSS代碼

body{ text-align:center} .main{ margin:0 auto; width:300px; height:100px; border:1px solid #F00}

2）、要害HTML代碼

<div class="main">容易填寫DIVCSS實例內容 </div>

2、成就截圖

感謝各位的閱讀，以上就是“DIV在IE中無法居中怎么解決”的內容了，經過本文的學習后，相信大家對DIV在IE中無法居中怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！