未知大小圖片在容器的垂直和水平居中問題
更新時(shí)間：2006年09月25日 00:00:00 作者：
CSS布局中,未知大小圖片的垂直居中，一直是比較頭疼的問題,標(biāo)準(zhǔn)瀏覽器只要設(shè)定容器的line-height和圖片的vertical-align:middle;就可以了，但對(duì)IE沒用，幾個(gè)月前在國(guó)外網(wǎng)站看到了一則對(duì)IE的解決方法，感覺不是很理想，也沒當(dāng)回事。最近看到經(jīng)常有朋友在問類似的問題，又把代碼翻了出來，針對(duì)IE改了下。
CSS
.box{
height:140px;
width:200px;
border: solid 1px #666;
text-align:center;/*水平居中*/
line-height:140px;
font-size:126px;/*IE靠這垂直居中*/
}
.box[class]{
font-size:12px;/*標(biāo)準(zhǔn)瀏覽器需要這個(gè)數(shù)值*/
}
img{
vertical-align:middle;/*標(biāo)準(zhǔn)瀏覽器圖片垂直居中*/
}
原先老外代碼的font-size是和高度相同，試下來容器的高度要比標(biāo)準(zhǔn)瀏覽器高一截，多次嘗試將字體尺寸大小減去了百分之十容器的高度,這樣一來，看起來差不多。至于什么原因還不清楚.
在IE5.5、IE6.0、FF1.5、Opera9.0下測(cè)試成功,對(duì)IE5.0和IE7.0無效。
CSS
.box{
height:140px;
width:200px;
border: solid 1px #666;
text-align:center;/*水平居中*/
line-height:140px;
font-size:126px;/*IE靠這垂直居中*/
}
.box[class]{
font-size:12px;/*標(biāo)準(zhǔn)瀏覽器需要這個(gè)數(shù)值*/
}
img{
vertical-align:middle;/*標(biāo)準(zhǔn)瀏覽器圖片垂直居中*/
}
原先老外代碼的font-size是和高度相同，試下來容器的高度要比標(biāo)準(zhǔn)瀏覽器高一截，多次嘗試將字體尺寸大小減去了百分之十容器的高度,這樣一來，看起來差不多。至于什么原因還不清楚.
在IE5.5、IE6.0、FF1.5、Opera9.0下測(cè)試成功,對(duì)IE5.0和IE7.0無效。
相關(guān)文章
針對(duì)瀏覽器隱藏CSS...2006-09-09
這篇文章主要介紹了一些css基礎(chǔ)知識(shí)關(guān)于CSS樣式的分類介紹，包括內(nèi)部樣式，行內(nèi)樣式，外部樣式等，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值2021-07-07
HTML5 WebStorage(HTML5本地存儲(chǔ)技術(shù))
HTML5中很重要的技能之一就是：HTML5本地存儲(chǔ)，今天就來說說這個(gè)技術(shù)，以及和其它存儲(chǔ)方案的比較。2013-10-10
這篇文章主要介紹了推薦一個(gè)好看Table表格的css樣式代碼詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
XHTML標(biāo)準(zhǔn)語法...2006-09-09
巧用CSS濾鏡做圖案文字...2006-08-08
表格邊框的css語法...2006-09-09
讓你的網(wǎng)頁動(dòng)起來:Javascript+CSS拖曳盒子指南
想讓你的網(wǎng)頁動(dòng)起來嗎?這份Javascript+CSS拖曳盒子指南將帶你進(jìn)入網(wǎng)頁交互設(shè)計(jì)的奇妙世界,跟著我們的步驟,你很快就能創(chuàng)建出令人眼前一亮的動(dòng)態(tài)網(wǎng)頁效果,準(zhǔn)備好開啟一段有趣的編程探索之旅吧!2024-03-03
CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)
對(duì)于背景屬性background-image大家應(yīng)該已經(jīng)很熟悉了,通過這些屬性來控制背景圖片在容器中如何顯示,但我們也只能為容器提供一張背景圖片,如果我們想讓一個(gè)容器的背景用多張圖片實(shí)現(xiàn),那么我們?cè)撊绾稳プ瞿?？再在容器里添加一些無用的元素嗎？2014-05-05
廣義的故障藝術(shù)不僅僅指這種效果，我覺得是很寬泛的，本文將介紹一些CSS能夠模擬完成的故障藝術(shù)效果。2021-05-05