因为您必须将行高度设置为div的高度，这样才能工作

基本上，你必须降到CSS3。

-moz-box-align: center;
-webkit-box-align: center;

你可能想要这样：

<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属性时。这些是关联的财产

首先，根本不建议使用内联CSS，它确实会破坏HTML。

为了对齐图像和跨度，您可以简单地执行垂直对齐：中间。.居中对齐{垂直对齐：中间；}＜div＞<img class=“align middle”src=“https://i.stack.imgur.com/ymxaR.png"><span class=“align-midle”>我在图像中间！感谢CSS！万岁</span></div>

我同意，这可能令人困惑。尝试利用表格功能。我使用这个简单的CSS技巧将情态动词放在网页的中心。它具有大型浏览器支持：

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

和CSS部分：

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

请注意，您必须设置图像和表格容器的样式并调整其大小，以使其按您的需要工作。享受