jQuery 如何垂直对齐具有动态高度的 div 内的图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5415710/
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
How to vertically align an image inside a div with dynamic height?
提问by catandmouse
What we have is a div that contains an image that a user uploads. This is the code:
我们拥有的是一个包含用户上传图像的 div。这是代码：
HTML:
HTML：
<div class="container_img">
<img height="120" width="150" src="[image name].jpg">
</div>
CSS:
CSS：
div.container_img {
overflow: hidden;
width: 150px;
height: 150px;
}
Our problem is if the image the user uploads has a height smaller than 150px, there's a big space at the bottom. So we want to vertically align the image so that it doesn't look like it's just floating.
我们的问题是，如果用户上传的图片的高度小于 150px，那么底部会有很大的空间。所以我们想要垂直对齐图像，使其看起来不像只是浮动。
I've tried searching for solutions on the net but I can't find one that works with dynamic images inside a DIV. Some solutions require that you know the dimensions of the image.
我试过在网上寻找解决方案，但我找不到一个适用于 DIV 中的动态图像的解决方案。某些解决方案要求您知道图像的尺寸。
Has anybody had this problem and solved it?
有没有人遇到过这个问题并解决了它？
采纳答案by Hussein
You need to use JavaScript/jQuery to detect image height. CSS is not a dynamic language and you cannot detect height using pure css. Using jQuery you can do
您需要使用 JavaScript/jQuery 来检测图像高度。CSS 不是动态语言，您无法使用纯 css 检测高度。使用 jQuery 你可以做到
jQuery
jQuery
var $img = $('div.container_img img');
var h = $img.height();
$img.css('margin-top', + h / -2 + "px"); //margin-top should be negative half of image height. This will center the image vertically when combined with position:absolute and top:50%.
CSS
CSS
div.container_img {
position:relative;
width: 150px;
height: 300px;
}
div.container_img img{
position:absolute;
top:50%;
}
Check working example at http://jsfiddle.net/nQ4uu/2/
在http://jsfiddle.net/nQ4uu/2/检查工作示例
回答by Matteo Riva
div.container_img {
display: table-cell;
vertical-align: middle;
/* other attributes */
}
works but I'm not sure if it does on all IE versions.
有效，但我不确定它是否适用于所有 IE 版本。
回答by Naveed Butt
回答by kuyabiye
it is not that easy, check out this page http://www.vdotmedia.com/demo/css-vertically-center.html
这并不容易，请查看此页面http://www.vdotmedia.com/demo/css-vertically-center.html
回答by Rohit Gupta
You can achieve this using flex in css:
您可以在 css 中使用 flex 来实现这一点：
div.container_img {
position:flex;
width: 150px;
height: 150px;
justify-content: center;
}
div.container_img img{
margin-top: auto;
margin-bottom: auto;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
回答by Kevin Lynch
I know this is an old question but i think there i s abetter answer with CSS alone
我知道这是一个老问题，但我认为仅使用 CSS 就有更好的答案
DEMO jsFiddle
演示jsFiddle
HTML
HTML
<div id="centered"></div>
CSS
CSS
#centered {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
height: 100px;
width: 300px;
margin: auto;
background-color: grey;
}
That's it!
就是这样！
