本文和大家重點(diǎn)討論一下Firefox嵌套CSS中div標(biāo)簽的居中問(wèn)題的解決方法，主要包括使用line-height垂直居中，清除容器浮動(dòng)，不讓鏈接折行，始終讓Firefox顯示滾動(dòng)條等內(nèi)容。

Firefox嵌套CSS中div標(biāo)簽的居中問(wèn)題的解決方法

假定有如下情況：

viewplaincopytoclipboardprint?

div>

div>

div>

div>

如果要實(shí)現(xiàn)b在a中居中放置，一般只需用CSS設(shè)置a的text-align屬性為center。這樣的方法在IE里看起來(lái)一切正常；但是在Firefox中b卻會(huì)是居左的。解決辦法就是設(shè)置b的橫向margin為auto。例如設(shè)置b的CSS樣式為：margin:0auto;。

最好的解決方案往往是最簡(jiǎn)單的，這里列出8個(gè)CSS技巧，非常簡(jiǎn)單，簡(jiǎn)單到只需要寫(xiě)一行代碼，只需要定義一個(gè)屬性參數(shù)。非常適合學(xué)習(xí)CSS的新手朋友閱讀。

◆使用line-height垂直居中

line-height:24px;

使用固定寬度的容器并且需要一行垂直居中時(shí)，使用line-height即可(高度與父層容器一致)。

◆清除容器浮動(dòng)

viewplaincopytoclipboardprint?

#main{

overflow:hidden;

}

#main{

overflow:hidden;

}

◆不讓鏈接折行

viewplaincopytoclipboardprint?

a{

whitewhite-space:nowrap;

}

a{

white-space:nowrap;

}

上面的設(shè)定就能避免鏈接折行，不過(guò)個(gè)人建議長(zhǎng)鏈接會(huì)有相應(yīng)的這行(有關(guān)換行方面的討論，參看圓心的記錄)。

◆始終讓Firefox顯示滾動(dòng)條

viewplaincopytoclipboardprint?

html{

overflow:-moz-scrollbars-vertical;

}

html{

overflow:-moz-scrollbars-vertical;

}

也可以使用

viewplaincopytoclipboardprint?

body,html{

min-height:101%;

}

body,html{

min-height:101%;

}

◆使塊元素水平居中

margin:0auto;

其實(shí)就是

viewplaincopytoclipboardprint?

margin-left:auto;

margin-right:auto;

margin-left:auto;

margin-right:auto;

這個(gè)技巧基本上所有的CSS教科書(shū)都會(huì)有說(shuō)明，別忘記給它加上個(gè)寬度。Exploer下也可以使用

viewplaincopytoclipboardprint?

body{

text-align:center;

}

body{

text-align:center;

}

然后定義內(nèi)層容器

text-align:left;

◆隱藏Exploertextarea的滾動(dòng)條

viewplaincopytoclipboardprint?

textarea{

overflow:auto;

}

textarea{

overflow:auto;

}

Exploer默認(rèn)情況下textarea會(huì)有垂直滾動(dòng)條。

◆設(shè)置打印分頁(yè)

viewplaincopytoclipboardprint?

h2{

page-break-before:always;

}

h2{

page-break-before:always;

}

page-break-before屬性能設(shè)置打印網(wǎng)頁(yè)時(shí)的分頁(yè)。

◆刪除鏈接上的虛線框

viewplaincopytoclipboardprint?

a:active,a:focus{

outline:none;

}

a:active,a:focus{

outline:none;

}

Firefox默認(rèn)會(huì)在鏈接獲得焦點(diǎn)(或者點(diǎn)擊時(shí))加上條虛線框，使用上面的屬性可以刪除。

◆最簡(jiǎn)單的CSS重置

viewplaincopytoclipboardprint?

*{

margin:0;padding:0

}

*{

margin:0;padding:0

}

CSS對(duì)瀏覽器的兼容性有時(shí)讓人很頭疼，或許當(dāng)你了解當(dāng)中的技巧跟原理，就會(huì)覺(jué)得也不是難事，從網(wǎng)上收集了IE7,6與Fireofx的兼容性處理方法并整理了一下。對(duì)于web2.0的過(guò)度，請(qǐng)盡量用xhtml格式寫(xiě)代碼，而且DOCTYPE影響CSS處理，作為W3C的標(biāo)準(zhǔn)，一定要加DOCTYPE聲明。

【編輯推薦】

【責(zé)任編輯：程華權(quán) TEL：(010)68476606】

總結(jié)

以上是生活随笔為你收集整理的html中div不在火狐居中,Firefox嵌套CSS中div标签居中问题解决方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。