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

我有一个div，它是145px X 145px。我在这个潜水里有一个img。 img可以是任何尺寸（最长的一面是130px）。我希望图像在div中垂直居中。我试过的所有东西都适用于大多数浏览器，但不适用于IE7。我需要一些能够在IE7中工作的东西。垂直对齐固定大小的中心图像div

来源

2011-02-15 David

我也有类似的要求。找到解决方案[here]（http://www.vanseodesign.com/css/vertical-centering/）。 – 2012-09-21 15:17:39

您可以通过在DIV背景这样的替换图像：

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

来源

2011-02-15 17:12:36

的工作，但它不适用于IE <9 – ndrizza 2012-12-29 20:27:25

不知道你到目前为止尝试过什么，但垂直对齐如果图像显示为内嵌元素，CSS属性应该可以工作。

上垂直对齐的一些信息：http://www.w3schools.com/css/pr_pos_vertical-align.asp

如果你有考虑到所有图像的高度，这是相当多而不使用JavaScript的唯一途径。

如果图像不内联元素，你只需要适应一致高度的图像，你可以做这样的事情：

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

否则，我能想到的唯一办法，以适应不同高度的图像将会做与你的CSS类似的东西，但将负边缘设置为JS图像高度的一半。

来源

2011-02-15 15:39:38

但正如他所说，图像“img可以是任意大小”。所以-50的值只适用于精确到100px的图像。因此不知道为什么这个答案有这么多的选票，当它不解决OP的问题？ – NickG 2012-11-06 15:15:11

是的，我的主要答案是不同尺寸的图像，但我也提供了一些其他选项的细节。你读过我的整个答案还是只读了代码？ – 2012-11-06 16:09:14

不知道有关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>

这在死点放置的图像。

来源

2012-05-21 17:06:07 specialscope

我创建了一个小的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>

而且你还需要CSS一点点：

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

来源

2012-11-04 22:09:52 Ben

这里是一个跨浏览器解决方案：

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

来源

2012-12-29 21:02:51 ndrizza

使用line-height属性解决了我的问题。

参考：vertical-align image in div

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：

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

来源

2013-04-18 15:14:51

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

回答

相关问题