垂直对齐中心图像在固定大小的div中

I have a div which is 145px X 145px. I have an img inside this dive. The img could be of any size (longest side being 130px). I would like the image to be centered vertically in the div. Everything that I have tried works in most browsers, but not IE7. I need something that will work in IE7.

我有一个div，它是145px X 145px。我有一个img在这潜水。img可以是任何大小(最长的边是130px)。我希望图像在div中垂直居中，我在大多数浏览器中尝试过的所有内容，但不是IE7。我需要一些能在IE7中工作的东西。

6 个解决方案

#1

You can replace the image by a background on the div like this :

您可以用div的背景来替换图像，如下所示:

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

#2

here's a cross-browser solution:

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

<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;
}

#3

Not sure about IE7 but for IE9 and rest of the modern browsers following works.

不确定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;
    }

To use it

使用它

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

This places images at dead centre.

这将图像放置在死中心。

#4

Using the line-height property solved the problem for me.

使用线高属性为我解决了问题。

Reference: vertical-align image in div

参考:div中的垂直对齐图像。

HTML:

HTML:

<div class="img_thumb">
    <a class="images_class" href="large.jpg" rel="images"><img src="http://www.minfo.pt/fotos/_cache/produtos/0/068.M.976010002__thumbnail_50_50_true_sharpen_1_1.JPG" title="img_title" alt="img_alt" /></a>
</div>

CSS:

CSS:

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    line-height:120px;
    text-align:center;
}

.img_thumb img {
    vertical-align: middle;
}

#5

Not sure what you have tried so far but the vertical-align CSS property should work if the images are displayed as inline elements.

不确定到目前为止您尝试了什么，但是如果图像显示为内联元素，那么垂直对齐的CSS属性应该可以工作。

Some info on vertical-align: http://www.w3schools.com/css/pr_pos_vertical-align.asp

有关vertical-align的一些信息:http://www.w3schools.com/css/pr_pos_vertical-align.asp。

If you have to account for all image heights, that is pretty much the only way without using JavaScript.

如果必须考虑所有的图像高度，这几乎是不使用JavaScript的惟一方法。

If the images are not inline elements and you only had to accommodate images of a consistent height, you could do something like this:

如果图像不是内联的元素，并且你只需要容纳一致高度的图像，你可以做如下的事情:

img {
    margin-top: -50px; /* This number should be half the height of your image */
    position: absolute;
        top: 50%;
}

Otherwise the only way I can think to accomodate images of varying height would be to do something similar with your CSS but set the negative margin to half of the image's height with JS.

否则，我能想到的适应不同高度的图像的唯一方法就是用CSS做一些类似的事情，但是用JS将负边距设置为图像高度的一半。

#6

I created a little jQuery code to do this without having to use nasty tables:

我创建了一个小jQuery代码来实现这一点，而不需要使用讨厌的表:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
imagepos = function () {
    $('img').each(function () {  
            imgheight = Math.round($(this).height() / 2);
            imgwidth = Math.round($(this).width() / 2);    
            $(this).attr("style", "margin-top: -" + imgheight + "px; margin-left: -" + imgwidth + "px; opacity:1;");
        });
    }   
$(window).load(imagepos);
</script>

And you also need a little bit of css:

你还需要一些css:

div
{
position:relative;
}
img
{
display:block;
margin:auto;
max-width:100%;
position:absolute;
top:50%;
left:50%;
opacity:0;
}

#1