如何将 div 内的图像与动态高度垂直对齐？

Question

我们有一个 div，其中包含用户上传的图像。代码如下：

HTML:

<div class="container_img">
    <img height="120" width="150" src="[image name].jpg">
</div>

CSS:

div.container_img {
    overflow: hidden;
    width: 150px;
    height: 150px;
}

我们的问题是，如果用户上传的图片高度小于 150px，底部就会有很大的空间。所以我们想要垂直对齐图像，这样它看起来就不像是浮动的。

我尝试在网上寻找解决方案，但找不到适用于 DIV 内动态图像的解决方案。某些解决方案要求您知道图像的尺寸。

有人遇到过这个问题并解决了吗？

Answer 1

您需要使用 JavaScript/jQuery 来检测图像高度。 CSS 不是动态语言，您无法使用纯 CSS 检测高度。使用 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

div.container_img {
    position:relative; 
    width: 150px;
    height: 300px;
}

div.container_img img{
    position:absolute;
    top:50%;
}

检查工作示例，网址为 http ://jsfiddle.net/nQ4uu/2/

Answer 2

div.container_img {
    display: table-cell;
    vertical-align: middle;
    /* other attributes */
}

有效，但我不确定它是否适用于所有 IE 版本。

Answer 3

我认为您无法使用任何直接的技术垂直对齐图像。您可以看到 this 用于水平对齐图像...

Answer 4

这并不容易，请查看此页面 http://www.vdotmedia.com /demo/css-vertically-center.html

Answer 5

您可以在 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%;
}

Answer 6

就有更好的答案

我知道这是一个老问题，但我认为仅使用 CSS演示 jsFiddle

HTML

 <div id="centered"></div>

CSS

#centered {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100px;
    width: 300px;
    margin: auto;
    background-color: grey;
}

就是这样！