定心圖片

Question

您好有以下代碼appneded三次：

<div class="bio"> 
    <div class="bio-icon"><img src="/images/icon_location.png" alt="Location" /></div> 
    <div class="bio-content"> 
     <div class="bio-title">location:</div> 
     <div class="bio-text">' . $obj[0] . '</div> 
    </div> 
</div> 

在每種情況下，生物圖標格內的圖像是不同的（這是不同的寬度和高度）。 基本上，會有一個圖標，旁邊有文字。我想讓文字居中（垂直），但我不知道該做什麼，因爲圖標的高度各不相同！我該怎麼辦？

感謝

Answer 1

可以使用vertical-align屬性居中文本垂直w3 link here

對於不同大小的圖標問題，請在CSS固定的寬度和高度

.bio-icon 
{ 
    height:50px; 
} 

這會自動調整你的圖標/圖像。

Answer 2

你可以試試這個這個

.bio { 
    display:table; 
} 

.bio-icon, bio-content { 
    display:table-cell; 
    vertical-align:middle; 
} 

唯一的問題是IE7不承認的CSS表的屬性，所以你可能需要使用jquery在IE7