在中心顯示前景圖像

Question

我有一個rails3應用程序，它具有用戶配置文件。每個配置文件可能有4個不同大小的配置文件圖像，並帶有幻燈片放映。我有一個背景圖像xx.gif。

如果個人資料圖片的尺寸小於640 * 480，則應在後臺顯示xx.gif，並在前景中顯示較小的個人資料圖片。較小的輪廓圖像也應該位於與背景圖像相對應的中心。

如何做到這一點？

Answer 1

試試這個：

HTML

<div id="main"> 
    <img id="image1" alt="test" src="/images/image.png" class="center"> 
</div>​ 

CSS

#main { 
    background: url("/images/bg.jpg") 50% 50% no-repeat; 
    border:1px solid #eee; 
    width:500px; 
    height:400px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align:center; 
} 

Fiddle here