CSS 在固定大小的 div 中垂直对齐中心图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5005244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vertical align center image in fixed size div
提问by David
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.
我有一个 145px X 145px 的 div。我在这次潜水中有一个 img。img 可以是任意大小（最长边为 130 像素）。我希望图像在 div 中垂直居中。我尝试过的所有东西都适用于大多数浏览器，但不适用于 IE7。我需要一些可以在 IE7 中工作的东西。
采纳答案by A.Baudouin
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>
回答by ndrizza
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;
}
回答by specialscope
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.
这会将图像置于死点。
回答by Chris Schmitz
Not sure what you have tried so far but the vertical-alignCSS property should work if the images are displayed as inline elements.
不确定到目前为止您已经尝试过什么，但是如果图像显示为内联元素，则vertical-alignCSS 属性应该可以工作。
Some info on vertical-align: http://www.w3schools.com/css/pr_pos_vertical-align.asp
关于垂直对齐的一些信息：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 将负边距设置为图像高度的一半。
回答by Muhammad Omar ElShourbagy
Using the line-heightproperty solved the problem for me.
使用该line-height属性为我解决了问题。
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;
}
回答by Ben
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;
}
