Css 在div中垂直对齐图像

我在div中遇到图像垂直对齐问题

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}

.img_thumb img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

<div class="img_thumb">
    <a class="images_class" href="large.jpg" rel="images"><img src="small.jpg" title="img_title" alt="img_alt" /></a>
</div>

.img\u拇指{
浮动：左；
高度：120px；
边缘底部：5px；
左边距：9px；
位置：相对位置；
宽度：147px；
背景色：rgba（0,0,0,0.5）；
边界半径：3px；
}
.img_拇指img{
显示：块；
左边距：自动；
右边距：自动；
垂直对齐：中间对齐；
}

据我所知，我需要“display:block；”将图像定位在中心位置，这样就行了。

---

在教程中，我也找到了许多答案，但它们并不“有用”，因为我的所有图像都不在同一高度

如果容器中有固定的高度，可以将行高度设置为与高度相同，并且它将垂直居中。然后只需将文本水平对齐到中心即可

下面是一个例子：

编辑

您的代码应该如下所示：

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    line-height:120px;
    text-align:center;
}

.img_thumb img {
    vertical-align: middle;
}

无论图像大小如何，图像都将始终水平和垂直居中。下面是另外两个不同尺寸图像的示例：

更新

现在是2016年（未来！），看起来有些事情正在改变（终于！！）

回到2014年，它将停止在所有版本的Windows中支持IE8，并鼓励所有用户更新到IE11或Edge。嗯，这应该发生在下周二（1月12日）

为什么这很重要？随着IE8的死亡，我们终于可以开始使用CSS3了

话虽如此，这里有一种水平和垂直对齐元素的更新方法：

.container {
    position: relative;
}

.container .element {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

使用这个

转换：translate（）它是完全动态的。您的元素具有固定的高度或宽度？还有你的集装箱吗？不没关系，它将始终居中，因为所有居中属性都固定在子对象上，它独立于父对象。谢谢CSS3

如果只需要在一维中居中，可以使用
translateY
或
translateX
。试一下，你就会知道它是如何工作的。另外，尝试更改
translate
的值，您会发现它在许多不同的情况下都很有用

这里，有一把新小提琴：

有关变换的详细信息，请参见

愉快的编码。
当您需要内联和块元素的垂直对齐中心时，您不需要定义定位，您可以采取以下想法：-

inline-elements :- <img style="vertical-align:middle" ...>
                   <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>  

block-elements :- <td style="vertical-align:middle"> ... </td>
                  <div style="display:table-cell; vertical-align:middle"> ... </div>

内联元素：-
foo
酒吧
块元素：-。。。
... 

查看演示：-
老问题，但现在使垂直对齐变得非常简单

只需将此css添加到
：

display:flex;
align-items:center;
justify-content:center;



现场示例：


.img\u拇指{
浮动：左；
高度：120px；
边缘底部：5px；
左边距：9px；
位置：相对位置；
宽度：147px；
背景色：rgba（0,0,0,0.5）；
边界半径：3px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

Cthulhu的答案是正确的，但如果你检查图像上方和之后的像素，你会发现div顶部有一个令人讨厌的3像素填充（这取决于字体大小）。要摆脱它，只需添加字体大小：0；对部门来说，这似乎是一个简单的解决方案，但我无法让它发挥作用。在隔离了wordpress模板的每一部分之后，我发现问题出在我的doctype上。从4.0过渡到HTML5 doctype，这很有效！希望这将有助于其他可能遇到同样问题的人2016年更新此答案为gold！；）感谢您更新截至2016年的答案。工作就像一个魅力！！！那次更新太棒了！泰！！很好，如果它真的是新的，我应该害怕使用它吗？@MarksCode它已经与所有现代浏览器兼容（IE11+）请参阅。它在IE10中也适用于