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