为什么不vertical-align: middle工作？然而， vertical-align: top 确实有效。
<div>
<img style="width:30px;height:30px">
<span style="vertical-align:middle">Doesn't work.</span>
</div>实际上，在这种情况下，它非常简单：将垂直对齐应用于图像。由于它全部在一行中，它实际上是您想要对齐的图像，而不是文本。
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>在 FF3 中测试过。
现在，您可以将 flexbox 用于此类布局。
.box {
display: flex;
align-items:center;
}<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>以下是一些垂直对齐的简单技巧：
这很容易：将文本元素的行高设置为等于容器的行高
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>绝对地将内部 div 相对于其容器定位
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div><div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>为了使其全面正常工作，您将不得不破解 CSS。幸运的是，有一个 IE 漏洞对我们有利。设置top:50%容器和top:-50%内部 div 的top:-50% ，您可以获得相同的结果。我们可以使用 IE 不支持的另一个功能将两者结合起来：高级 CSS 选择器。
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>此解决方案需要比其他解决方案稍微更现代的浏览器，因为它使用了transform: translateY属性。 （ http://caniuse.com/#feat=transforms2d ）
将以下 3 行 CSS 应用于元素将垂直居中于其父元素，而不管父元素的高度如何：
position: relative;
top: 50%;
transform: translateY(-50%);