如何垂直对齐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;
}

我们的问题是，如果用户上传的图像高度小于150像素，则底部有一个很大的空间。 因此，我们希望垂直对齐图像，使其看起来不像是浮动的。

我曾尝试在网上搜索解决方案，但我找不到一个可以在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

您可以使用flex in css实现此目的：

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 4

我认为你无法使用任何直接技术垂直对齐图像。 你可以看到这个水平对齐图像...

Answer 5

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

Answer 6

我知道这是一个古老的问题，但我认为只有CSS才有更好的答案

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

而已！