不定寬高div內(nèi)圖片垂直居中的css樣式
發(fā)布時間：2014-07-09 09:38:29 作者：佚名 
我要評論
我要評論這篇文章主要介紹了在不定寬高的情況下，div內(nèi)圖片如何垂直居中，css樣式如何書寫？示例代碼如下
最簡單的方法莫過于設(shè)置外層元素的css屬性：
div{
display: table-cell;
}
但是IE6/7并不支持這個css樣式，為了兼容它們可以采用下面的方法。
html的結(jié)構(gòu)如下：
<div><span></span><img src="test.png" alt=""></div>
css代碼如下：
div{
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
span{
line-height: 100%;
vertical-align: middle;
display: inline-block;
height: 100%;
}
img{
width: 100%;
vertical-align: middle;
}
通過設(shè)置以上屬性可以達(dá)到下圖的效果，圖片在div中垂直居中。
這個方法的原理是在img標(biāo)簽前面插入一個空的span標(biāo)簽，利用它來撐開div內(nèi)的行高到100%。
復(fù)制代碼
代碼如下:div{
display: table-cell;
}
但是IE6/7并不支持這個css樣式，為了兼容它們可以采用下面的方法。
html的結(jié)構(gòu)如下：
復(fù)制代碼
代碼如下:<div><span></span><img src="test.png" alt=""></div>
css代碼如下：
復(fù)制代碼
代碼如下:div{
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
span{
line-height: 100%;
vertical-align: middle;
display: inline-block;
height: 100%;
}
img{
width: 100%;
vertical-align: middle;
}
通過設(shè)置以上屬性可以達(dá)到下圖的效果，圖片在div中垂直居中。
這個方法的原理是在img標(biāo)簽前面插入一個空的span標(biāo)簽，利用它來撐開div內(nèi)的行高到100%。
相關(guān)文章
- 這篇文章主要介紹了DIV或者DIV里面的圖片水平與垂直居中的方法,需要的朋友可以參考下2018-11-15
DIV+CSS中讓布局、背景圖片、文字內(nèi)容居中的方法
這篇文章主要為大家介紹了在DIV+CSS布局的頁面里，讓布局、背景圖片、文字內(nèi)容居中的方法，從布局內(nèi)容到頁面里文章文字居中都是非常重要的，而css來設(shè)置居中也是非常簡單的2014-10-09- 正如標(biāo)題所言圖片與上層的div保持水平、垂直都居中，網(wǎng)上會搜索到很多類似標(biāo)題的文章，不過大同小異，本文寫了一個希望對大家有所幫助2013-08-12
- 讓圖片在div容器里上下左右居中，在實際應(yīng)用中是很常見的，下面為大家演示個示例，希望對大家有所幫助2013-08-02
- 關(guān)于圖片垂直居中的話題想必大家在論壇或者是百度搜索列表中看到了不少了吧，煩人的是沒有具體或者相當(dāng)詳細(xì)的解決方法，希望本文所整理的知識點可以幫助到你2013-03-22
- 2009-06-19
如何實現(xiàn)div 圖片在DIV內(nèi)水平居中
本文介紹了div 圖片如何在DIV內(nèi)水平居中，無論文字居中、圖片居中等內(nèi)容居中我們都可以使用以上兩種方法實現(xiàn)，一般推薦使用CSS進(jìn)行，但網(wǎng)頁多時候，我們只需要修改CSS文件2021-11-30最新評論
