div圖片垂直居中 如何使div中圖片垂直居中
發(fā)布時(shí)間：2013-03-22 11:39:04 作者：佚名 
我要評(píng)論
我要評(píng)論關(guān)于圖片垂直居中的話題想必大家在論壇或者是百度搜索列表中看到了不少了吧，煩人的是沒(méi)有具體或者相當(dāng)詳細(xì)的解決方法，希望本文所整理的知識(shí)點(diǎn)可以幫助到你
div相對(duì)與table對(duì)于圖片的垂直居中支持的并不好,特別對(duì)于不同瀏覽器的兼容性來(lái)說(shuō),這里我們看下一個(gè)簡(jiǎn)潔的css解決方法:
在曾經(jīng)的 淘寶UED 招聘 中有這樣一道題目：
“使用純CSS實(shí)現(xiàn)未知尺寸的圖片(但高寬都小于200px)在200px的正方形容器中水平和垂直居中。”
當(dāng)然出題并不是隨意，而是有其現(xiàn)實(shí)的原因，垂直居中是 淘寶 工作中最常遇到的一個(gè)問(wèn)題，很有代表性。
題目的難點(diǎn)在于兩點(diǎn)：
1.垂直居中；
2.圖片是個(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://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>
提示：您可以先修改部分代碼再運(yùn)行
在曾經(jīng)的 淘寶UED 招聘 中有這樣一道題目：
“使用純CSS實(shí)現(xiàn)未知尺寸的圖片(但高寬都小于200px)在200px的正方形容器中水平和垂直居中。”
當(dāng)然出題并不是隨意，而是有其現(xiàn)實(shí)的原因，垂直居中是 淘寶 工作中最常遇到的一個(gè)問(wèn)題，很有代表性。
題目的難點(diǎn)在于兩點(diǎn)：
1.垂直居中；
2.圖片是個(gè)置換元素，有些特殊的特性。
至于如何解決，下面是一個(gè)權(quán)衡的相對(duì)結(jié)構(gòu)干凈，CSS簡(jiǎn)單的解決方法：
復(fù)制代碼
代碼如下:.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://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>
提示：您可以先修改部分代碼再運(yùn)行
相關(guān)文章
- 這篇文章主要介紹了DIV或者DIV里面的圖片水平與垂直居中的方法,需要的朋友可以參考下2018-11-15
DIV+CSS中讓布局、背景圖片、文字內(nèi)容居中的方法
這篇文章主要為大家介紹了在DIV+CSS布局的頁(yè)面里，讓布局、背景圖片、文字內(nèi)容居中的方法，從布局內(nèi)容到頁(yè)面里文章文字居中都是非常重要的，而css來(lái)設(shè)置居中也是非常簡(jiǎn)單的2014-10-09- 這篇文章主要介紹了在不定寬高的情況下，div內(nèi)圖片如何垂直居中，css樣式如何書寫？示例代碼如下2014-07-09
如何讓圖片相對(duì)于上層DIV始終保持水平、垂直都居中
正如標(biāo)題所言圖片與上層的div保持水平、垂直都居中，網(wǎng)上會(huì)搜索到很多類似標(biāo)題的文章，不過(guò)大同小異，本文寫了一個(gè)希望對(duì)大家有所幫助2013-08-12- 讓圖片在div容器里上下左右居中，在實(shí)際應(yīng)用中是很常見的，下面為大家演示個(gè)示例，希望對(duì)大家有所幫助2013-08-02
- 2009-06-19
如何實(shí)現(xiàn)div 圖片在DIV內(nèi)水平居中
本文介紹了div 圖片如何在DIV內(nèi)水平居中，無(wú)論文字居中、圖片居中等內(nèi)容居中我們都可以使用以上兩種方法實(shí)現(xiàn)，一般推薦使用CSS進(jìn)行，但網(wǎng)頁(yè)多時(shí)候，我們只需要修改CSS文件2021-11-30最新評(píng)論
