用css實現(xiàn)圖片垂直居中的使用技巧
更新時間：2008年05月29日 20:03:42 作者：
使用純CSS實現(xiàn)未知尺寸的圖片(但高寬都小于200px)在200px的正方形容器中水平和垂直居中
題目的難點在于兩點：
垂直居中；
圖片是個置換元素，有些特殊的特性。
至于如何解決，下面是一個權(quán)衡的相對結(jié)構(gòu)干凈，CSS簡單的解決方法：
.box {
/*非IE的主流瀏覽器識別的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*設(shè)置水平居中*/
text-align:center;
/* 針對IE的Hack */
*display: block;
*font-size: 175px;/*約為高度的0.873，200*0.873 約為175*/
*font-family:Arial;/*防止非utf-8引起的hack失效問題，如gbk編碼*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*設(shè)置圖片垂直居中*/
vertical-align:middle;
}
<div class="box">
<img src="http://m.fzitv.net/images/logo.gif" />
</div>
當(dāng)然還有其他的解決方法，在此不深究，
垂直居中；
圖片是個置換元素，有些特殊的特性。
至于如何解決，下面是一個權(quán)衡的相對結(jié)構(gòu)干凈，CSS簡單的解決方法：
.box {
/*非IE的主流瀏覽器識別的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*設(shè)置水平居中*/
text-align:center;
/* 針對IE的Hack */
*display: block;
*font-size: 175px;/*約為高度的0.873，200*0.873 約為175*/
*font-family:Arial;/*防止非utf-8引起的hack失效問題，如gbk編碼*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*設(shè)置圖片垂直居中*/
vertical-align:middle;
}
<div class="box">
<img src="http://m.fzitv.net/images/logo.gif" />
</div>
當(dāng)然還有其他的解決方法，在此不深究，
相關(guān)文章
一點小小的創(chuàng)意css鼠標(biāo)放上去則顯示電話號碼
一點小小的創(chuàng)意css鼠標(biāo)放上去則顯示電話號碼...2007-10-10
多中語言實現(xiàn)判斷客戶訪問用得是那個域名 然后轉(zhuǎn)到對應(yīng)的目錄
多中語言實現(xiàn)判斷客戶訪問用得是那個域名 然后轉(zhuǎn)到對應(yīng)的目錄...2007-05-05
web標(biāo)準(zhǔn)知識——從p開始，循序漸進(jìn)
從今天開始，我將全面的共享出我所能理解的所有WEB標(biāo)準(zhǔn)方面的知識放在這個“WEB標(biāo)準(zhǔn)能有多難？”的專欄里。當(dāng)然由于振之的水平有限，所講并非是完全正確的。在看了這個專欄的文章的時候要理性的分析，要有自己的判斷，歡迎各位朋友提出自己的看法與意見。2008-06-06
今天制作div下的li分兩列顯示發(fā)現(xiàn)，兩邊的邊框無法完全顯示，或顯示斷斷續(xù)續(xù)的，或者拖動滾動條就出現(xiàn)邊框的顯示問題2008-05-05
純CSS生成抗鋸齒圓角的代碼...2007-08-08
z-index是CSS中控制元素層級的屬性，但其工作原理并不簡單。本文將深入探討z-index的工作原理，包括堆疊上下文、層疊順序和層疊上下文等概念，并介紹z-index的應(yīng)用技巧，如如何避免z-index的陷阱、如何使用z-index實現(xiàn)復(fù)雜布局等。2023-05-05
web前端開發(fā)中，適當(dāng)?shù)囊?guī)范和標(biāo)準(zhǔn)絕不是消滅代碼內(nèi)容的創(chuàng)造性、優(yōu)雅性,而是限制過度個性化，以一種普遍認(rèn)可的統(tǒng)一方式,提升協(xié)作效率,降低溝通成本。規(guī)范的目的是為了編寫高質(zhì)量的代碼。2022-12-12
用css實現(xiàn)的訪問過的連接下面都有一個下劃線方便需要這種效果的朋友特整理如下2008-06-06
BUTTON和INPUT的區(qū)別...2007-02-02
有時候我們需要首字母大寫，不必每次都編輯文章了，用css實現(xiàn)更方便2008-06-06