不定寬高div內圖片垂直居中的css樣式

這篇文章主要介紹了關於不定寬高div內圖片垂直居中的css樣式，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

這篇文章主要介紹了在不定寬高的情況下，p內圖片如何垂直居中，css樣式如何書寫？範例程式碼如下

最簡單的方法莫過於設定外層元素的css屬性： 

p{ 
display: table-cell; 
}

但是IE6/7並不支援這個css樣式，為了相容它們可以採用下面的方法。 

html的結構如下： 

<p><span></span><img src="test.png" alt=""></p>

css程式碼如下： 

p{ 
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; 
}

透過設定上述屬性可以達到下圖的效果，圖片在p中垂直居中。
 
這個方法的原理是在img標籤前面插入一個空的span標籤，利用它來撐開p內的行高到100%。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何對未知高度的圖片設定垂直居中

關於CSS banner圖片響應式居中顯示的方法

#

以上是不定寬高div內圖片垂直居中的css樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！