不定寬高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%。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！