垂直对齐div中的img元素[重复]答案

【问题标题】：Vertical aligning an img element within a div [duplicate]垂直对齐div中的img元素[重复]
【发布时间】：2013-04-17 17:20:45
【问题描述】：

我正在尝试在 div 中垂直对齐我的 ing 元素。唯一的问题是 img 元素没有固定的高度。我尝试将垂直对齐与表格、表格单元格和内联块和内联结合使用。这些似乎都不起作用。有谁知道我怎么能做到这一点？我制作了一个 JSFiddle 来重现我的问题。

JsFiddle：http://jsfiddle.net/6gMcK/1/

HTML：

<div id="image-container">
    <img src="http://www.image2012.com/images/2013/03/landscapes-landscape-free.jpg">
</div>

CSS：

#image-container {
    padding:5px;
    height: 135px;
    border: 1px solid black;
    display: table;
    float:left;
}

#image-container img{
    display: table-cell;
    max-height:125px;

    vertical-align: middle;
}

【问题讨论】：

在这里阅读如何：stackoverflow.com/questions/7336503/… - 我也将你的小提琴更新为你的规格jsfiddle.net/6gMcK/2
@limelights 我认为这应该是一个答案......
@MarcelGwerder 不，我相信在问这个问题之前应该把它挖出来，因为其他一切都只是它的副本。我不相信重复或抄袭答案。
@limelights 当然可以，但它仍然是一个有效的解决方案。
感谢您帮助我。但是，这不适用于浮动的父级。我将我的 img 嵌套在另一个不浮动的容器中。感谢您的帮助！

标签： html css image

【解决方案1】：

更改一些属性像这样

   #image-container {
    padding: 5px;
    height: 135px;
    border: 1px solid black;
    display: table-cell;
    vertical-align: middle;
}

#image-container img{
    max-height: 125px;
    display: block;
}

Live Demo

【讨论】：

【解决方案2】：

我经常使用的一个解决方案是将图像作为图像容器的背景。通过这种方式，我可以将宽度和高度设置为所需的任何值以及容器的任何图像和大小，只需一点绝对定位，并且始终显示完整图像。

#image-container {
    position:absolute;
    left:30%;
    right:30%;
    min-width:135px;
    height: 135px;

    border: 1px solid black;
    background-image:url('image.png');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

当然，您可以随时根据自己的需要调整宽度值。我一直觉得这是一种显示图像的简单解决方案。

【讨论】：

请注意：这些是 CSS3 属性，因此该解决方案适用于现代浏览器，但不适用于 IE

【解决方案3】：

如果容器中只有一张图像，并且容器具有固定高度，那么您可以简单地将line-height = container_height_px 应用于容器

试试这个demo

【讨论】：

如果我们将 img-container 的高度降低到 100px，我们可以看到图像没有完全垂直居中（这在某些情况下可能很烦人），因为它仍然具有默认显示：inline。垂直居中的最佳跨浏览器解决方案是使用旧表并给出 img display: block。它也适用于 20 世纪的浏览器。
问题没有说容器有可变高度，它说 img 有可变高度