Question

我正试图在div中垂直对齐我的ing元素。唯一的问题是img元素没有固定的高度。我尝试将vertical-align与table，table-cell和inline-block以及inline结合使用。这似乎都不起作用。有谁知道我怎么能做到这一点？我创建了一个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;
}

<强> Live Demo

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

当然，根据您的需求，您可以随时使用宽度值。我总觉得这是一个显示图像的简单解决方案。

Answer 3

如果您在容器中只有一个图像，并且容器具有固定的高度，那么您只需将line-height = container_height_px应用于容器

试试 demo

垂直对齐div中的img元素

3 个答案: