为什么不垂直对齐：中间工作？然而，垂直对齐：顶部确实有效。
跨度{垂直对齐：中间；}＜div＞<img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>
当前回答
第二部分{显示：柔性；对齐项目：居中；}＜div＞<img src=“http://lorempixel.com/30/30/“alt=”小img“/><span>它起作用了</span></div>
其他回答
因为您必须将行高度设置为div的高度，这样才能工作
你可能想要这样：
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
正如其他人所建议的，尝试在图像上垂直对齐：
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS并不烦人。你只是没有阅读文档；P
写下这些跨度财产
span{
display:inline-block;
vertical-align:middle;
}
使用显示：内联块；当您使用vertical-align属性时。这些是关联的财产
基本上，你必须降到CSS3。
-moz-box-align: center;
-webkit-box-align: center;
实际上，在这种情况下非常简单：对图像应用垂直对齐。因为它都在一行中，所以它实际上是您想要对齐的图像，而不是文本。
<!-- 将“垂直对齐：中间”样式从span移动到img-->＜div＞<img style=“vertical align:middle”src=“https://via.placeholder.com/60x60“alt=”显示文本60 x 60的灰色图像“><span style=“”>有效</span></div>
在FF3中测试。
现在，您可以将flexbox用于这种类型的布局。
.box格式{显示：柔性；对齐项目：居中；}<div class=“box”><img src=“https://via.placeholder.com/60x60"><span style=“”>有效</span></div>
