垂直对齐div内的img元素

我正在尝试在div内垂直对齐我的ing元素。唯一的问题是img元素没有固定的高度。我尝试了与table，table-cell，inline-block和inline结合的垂直对齐方式。这似乎没有工作。有没有人有任何想法我可以做到这一点？我制作了一个JSFiddle来重现我的问题。垂直对齐div内的img元素

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

来源

2013-04-24 Frank Kluytmans

读到这里如何：HTTP：/ /stackoverflow.com/questions/7336503/how-to-vertical-align-image-inside-div - 我也更新你的小提琴你的规格http://jsfiddle.net/6gMcK/2/ – 2013-04-24 08:40:04

@limelights我认为这应该是一个答案... – 2013-04-24 08:45:23

@MarcelGwerder不，我相信这应该已经挖出之前问这个问题，因为一切都只是它的副本。我不相信复制或复制答案。 – 2013-04-24 08:48:00

更改某些属性像这样

#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

来源

2013-04-24 08:44:52

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

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

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

来源

2013-04-24 09:48:17

请注意：这些都是CSS3属性，所以此解决方案可以在现代浏览器上运行，但不能在IE <9上运行。 – skobaljic 2013-04-24 12:13:51

如果你只需要在容器中的一个图像，并且该容器有一个固定的高度，那么你可以简单地套用line-height = container_height_px到容器

试试这个demo

来源

2013-04-24 09:55:27 Danield

如果我们将img-container高度降低到100px，我们可以看到图像不是完全垂直居中（在某些情况下可能会令人讨厌），因为它仍然具有默认显示：inline。垂直居中最好的跨浏览器解决方案是使用旧表格并输入img display：block。它也可以在20世纪的浏览器上运行。 – skobaljic 2013-04-24 12:10:51

这个问题并没有说容器的高度是变化的，它说** img **的高度是变化的 – Danield 2013-04-24 12:21:26

垂直对齐div内的img元素

回答

相关问题