Html 将图像垂直居中放置在向左浮动且具有最小高度的div中_Html_Css

Html 将图像垂直居中放置在向左浮动且具有最小高度的div中

html css

Html 将图像垂直居中放置在向左浮动且具有最小高度的div中,html,css,Html,Css,我试图将垂直居中一个div中的图像，它是向左浮动，最小高度为150px 问题是，我尝试的东西都不管用。我尝试了各种方法，包括对另一个div使用display:table，对内部单元格使用display:table cell，但一切都保持不变出现在div中的图像没有固定的高度，但会在服务器上降低到150px 我怎样才能让它工作 ![<!DOCTYPE HTML> <html> <head> <title>The annoying image&

我试图将

垂直居中

一个

div

中的图像，它是

向左浮动

，最小高度为

150px

问题是，我尝试的东西都不管用。我尝试了各种方法，包括对另一个

div使用display:table
，对内部单元格使用display:table cell
，但一切都保持不变
出现在div
中的图像没有固定的高度，但会在服务器上降低到150px
我怎样才能让它工作
![<!DOCTYPE HTML>
<html>
 <head>
  <title>The annoying image</title>
 </head>
<body>

<div style="border:1px solid #ddd; float:left; height:150px; padding:10px; display: table;">
    <img src="/imgur/us/thumb_1.jpg" style="display: table-cell; vertical-align: middle; text-align: center;">
</div>

</body>
</html>

！[
恼人的形象



这是小提琴：
html
<div class="outer">
    <span class="helper"></span>
    <img src="http://i.stack.imgur.com/e0Snp.jpg">
</div>

同时检查这些答案：和
不错的答案，但您可以去掉helper元素，如下所示：+不需要显示：table；

@NicoO-Nice方法，但在IE中失败（我使用的是IE9）@Norman您已经看到了旧版本的评论。我没有看到无意义的

显示：table

。我已将其删除，请再次检查。适用于firefox甚至IE8@NicoO我检查了你的答案。有趣的是，它正确地显示在小提琴上，但在我的测试机器上（Win7 64和所有浏览器）图像左侧的空间比右侧多。我花了所有时间试图修复它。我做错了什么？我使用的代码没有任何更改。@Nico请检查我上载的新图像。

.outer {
    border:1px solid #ddd; 
    float:left; 
    height:150px; 
    padding:10px; 
    display: table;
}

.outer img {
     vertical-align: middle;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}