我有一个div,它是145px X 145px。我在这个潜水里有一个img。 img可以是任何尺寸(最长的一面是130px)。我希望图像在div中垂直居中。我试过的所有东西都适用于大多数浏览器,但不适用于IE7。我需要一些能够在IE7中工作的东西。垂直对齐固定大小的中心图像div
回答
您可以通过在DIV背景这样的替换图像:
<div style="background:url(myimage.jpg) no-repeat center center"></div>
的工作,但它不适用于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图像高度的一半。
但正如他所说,图像“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>
这在死点放置的图像。
我创建了一个小的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;
}
这里是一个跨浏览器解决方案:
<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;
}
使用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;
}
- 1. 其他div中的垂直中心固定大小div
- 2. 如何在div中垂直对齐未知大小的图像
- 3. 如何垂直对齐未知大小的图像到div的中心?
- 4. 垂直对齐图像的固定高度div
- 5. CSS:垂直对齐div中的图像
- 6. 在垂直中心对齐图像
- 7. 垂直对齐div中的中心
- 8. div内图像的垂直对齐
- 9. CSS中心垂直对齐div
- 10. 如何在中心对齐垂直div?
- 11. 垂直居中的图像缩略图到固定大小的div
- 12. 垂直对齐其他图像div
- 13. Div与图像垂直对齐
- 14. 在div中心对齐大图像
- 15. npoi垂直对齐中心
- 16. 中心垂直对齐
- 17. 垂直对齐DIV
- 18. 垂直对齐div
- 19. 垂直对齐文本中固定宽度的div和浮法
- 20. 垂直中心链接图像div
- 21. CSS。固定垂直格对齐
- 22. 垂直对齐在div中的标签中的中间图像
- 23. 如何垂直对齐位置固定的div和px宽度?
- 24. 如何水平和垂直对齐固定位置的div?
- 25. 垂直对齐列中的图像
- 26. 垂直对齐IE中的图像6
- 27. 垂直对齐div中的div
- 28. 试图垂直对齐图标和div
- 29. CSS垂直对齐的div特定
- 30. 文本左对齐和垂直中心div div
我也有类似的要求。 找到解决方案[here](http://www.vanseodesign.com/css/vertical-centering/)。 – 2012-09-21 15:17:39