垂直对齐div中的img元素

15 浏览
0 Comments

垂直对齐div中的img元素

这个问题已经有答案了:

如何在div中垂直对齐图片

我试图在一个div中垂直对齐我的img元素。唯一的问题是img元素没有固定的高度。我尝试了vertical-align与table、table-cell、inline-block和inline的组合。但似乎没有任何效果。有人有任何想法如何实现这一点吗？我制作了一个重现我的问题的JSFiddle。

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

HTML:

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

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

我经常使用的解决方案是将图像作为图像容器的背景。这样，我可以将宽度和高度设置为所需的任何图像和容器大小，并进行一些绝对定位，使得整个图像始终显示。

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

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

0
0 Comments

改变一些属性像这样

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

在线演示

0