html - 垂直对齐 div 中的 img 元素

Question

我正在尝试在 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;
}

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

现场演示

Answer 2

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

试试这个演示

Answer 3

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

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

当然，您可以随时根据您的需要使用宽度值。我一直发现这是显示图像的简单解决方案。