垂直对齐图像旁边的文字？
为什么不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>以下是垂直对齐的一些简单技巧：
一行垂直对齐：中间
这很容易：将文本元素的行高设置为等于容器的行高
<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>
如果您必须支持IE <= 7的古老版本
为了让这一切都能够正确地工作，你必须对CSS进行一些破解。 幸运的是，有一个IE错误对我们有利。 设置top:50%容器上的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>
可变的容器高度vertical-align：middle
该解决方案需要比其他解决方案稍微更现代化的浏览器，因为它使用transform: translateY属性。 （http://caniuse.com/#feat=transforms2d）
无论父元素的高度如何，将以下3行CSS应用于元素都会将其垂直居中在其父元素中：
position: relative;
top: 50%;
transform: translateY(-50%);
将您的div更改为flex容器：
div {display:flex;}
现在有两种方法可以将所有内容的路线居中：
方法1：
div {align-items:center;}
DEMO
方法2：
div * {margin-top:auto; margin-bottom:auto;}
DEMO
在img上尝试不同的宽度和高度值，并在span上尝试不同的字体大小值，您会看到它们始终保留在容器中间。