DIV在IE中無(wú)法居中如何解決

本篇內(nèi)容介紹了“DIV在IE中無(wú)法居中如何解決”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一、DIV水平布局居中介紹  

讓最外層DIV在IE瀏覽器中水平居中，除了對(duì)其設(shè)置margin:0 auto外，一般還要對(duì)body設(shè)置樣式，但一般高版本IE瀏覽器無(wú)須設(shè)置此CSS樣式也能使DIV居中，低版本IE比如IE6和對(duì)標(biāo)準(zhǔn)比較嚴(yán)格瀏覽器需要設(shè)置text-align:center。

有時(shí)不經(jīng)意對(duì)要居中的最外層設(shè)置float:left或float:right也是造成設(shè)置margin:0 auto布局不能水平居中原因。

因?yàn)樵O(shè)置float是讓DIV浮動(dòng)靠左或浮動(dòng)靠右，你要讓DIV居中肯定需要設(shè)置margin:0 auto，這個(gè)時(shí)候就是邏輯錯(cuò)誤了，即讓DIV靠左或靠右，又居中，這個(gè)明顯邏輯錯(cuò)誤。所以要讓最外層DIV水平居中于瀏覽器中，就100%不能同時(shí)使用float，必須要使用margin:0 auto樣式。

二、DIVCSS5總結(jié)下最外層DIV盒子水平布局居中條件  

1、不能使用float（無(wú)論float:left和float:right都不能使用）
2、對(duì)body設(shè)置text-align:center，以便兼容低版本和高版本瀏覽器
3、對(duì)最外層DIV設(shè)置margin:0 auto，兼容各大瀏覽器水平居中樣式

三、DIVCSS5小實(shí)例說(shuō)明

假如最外層DIV的CSS class命名為“main”，為了看到居中效果，對(duì)此盒子設(shè)置css寬300px、css高100px、紅色邊框，讓其居中。

此實(shí)例是在DIVCSS5初始化模板基礎(chǔ)上完成，以便更好兼容各大瀏覽器，建議無(wú)論實(shí)踐還是做項(xiàng)目，大家都可以使用DIVCSS5提供初始化模板基礎(chǔ)上開(kāi)發(fā)制作，減少錯(cuò)誤與增強(qiáng)CSS兼容性。

1、完整實(shí)例DIV+CSS代碼
1）、關(guān)鍵CSS代碼

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

2）、關(guān)鍵HTML代碼

<div class="main"> 容易填寫DIVCSS實(shí)例內(nèi)容 </div>

2、效果截圖

“DIV在IE中無(wú)法居中如何解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！