固定尺寸div中的垂直对齐中心图像

Question

我有一个145px X 145px的div.我在这次潜水中有一个img.img可以是任何尺寸(最长边为130px).我希望图像在div中垂直居中.我尝试的一切都适用于大多数浏览器,但不适用于IE7.我需要能在IE7中运行的东西.

Answer 1

这是一个跨浏览器的解决方案:

<div class="img-container"><img src="picture.png" class="cropped"/></div>


div.img-container {
     width: 390px;
     height: 211px;
     position: relative;
     margin-left: auto;
     margin-right: auto;
     overflow: hidden;
 }
img.cropped {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Answer 2

您可以使用div上的背景替换图像,如下所示:

<div style="background:url(myimage.jpg) no-repeat center center"></div>

Answer 3

不确定IE7,但IE9和其他现代浏览器的工作.

    .picturecontainer{
        width:800px;
        height:800px;
        border:solid 1px;
        display:table-cell;
        vertical-align:middle;

    }
    .horizontalcenter{
        display:block;
        margin-left:auto;
        margin-right:auto;
        vertical-align:middle;
    }

使用它

<div class="picturecontainer"><img src="" class="horizontalcenter"/></div>

这将图像置于死点.