這篇文章主要介紹了關於不定寬高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中文網！
相關推薦：
#
以上是不定寬高div內圖片垂直居中的css樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
