在中心显示前景图像

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