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

Posted 2023-03-05

【中文标题】如何垂直对齐具有动态高度的div内的图像？

【英文标题】：How to vertically align an image inside a div with dynamic height?

【发布时间】：2011-07-21 21:42:09

【问题描述】：

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

HTML：

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

CSS：

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

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

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

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

【问题讨论】：

可以使用纯 CSS：***.com/questions/18516317/…

【参考方案1】：

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

【参考方案2】：

没那么简单，看看这个页面http://www.vdotmedia.com/demo/css-vertically-center.html

【参考方案3】：

您需要使用 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/查看工作示例

【讨论】：

感谢代码，但是当我在 HTML 上尝试它时，它似乎不起作用。我在 jQuery 脚本上遗漏了什么吗？我用 包围它。

你还需要包含jQuery脚本<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

我已经包含了 jQuery 库，但它仍然无法工作。这是整个 jQuery 代码：

好吧，别管我之前的问题了。显然，这是因为我将脚本放在 标记内。我应该把它放在body标签之外。感谢您的帮助！

【参考方案4】：

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

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

【参考方案5】：

我知道这是一个老问题，但我认为单独使用 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;

就是这样！

【参考方案6】：

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