將圖像定位在垂直中心

Question

我知道這個問題已經被問過很多次了（1,2），但是看起來我錯過了這個觀點，因爲在我的例子中我無法實現這一點。以下是示例：jsfiddle Link。感謝您的幫助。

HTML：

<li class="imageFrame"> 
    <a class="nyroModal" rel="gal" href="#photo_3680" title="Take a walk on the wild side "> 
     <img class="" src="http://salon-cakovec.fotografija.hr/prijava/upload/thumb/fepessoa_1339763389.jpg" height="120" width="120" alt="Take a walk on the wild side"> 
    </a> 
</li>​ 

CSS：

.imageFrame { 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    padding: 5px; 
    margin: 5px; 
    width: 120px; 
    height: 120px; 
    text-align: center; 
    float: left; 
    border: 3px solid #EEE; 
    background-color: #CCC; 
} 


.imageFrame img { 
    height: auto; 
    width: auto; 
} 

Answer 1

檢查更新小提琴 - http://jsfiddle.net/aDVyu/4/

評論 - float並添加 -

display: table-cell; 
vertical-align: middle; 

是的！ IE7不支持display：table-cell;物業

如果你想這在IE7的工作還那麼你需要使用jQuery來計算高度 - http://jsfiddle.net/tQBVy/