为什么不垂直对齐：中间工作？然而，垂直对齐：顶部确实有效。
跨度{垂直对齐：中间；}＜div＞<img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>
当前回答
接受答案中使用的技术仅适用于单行文本（demo），而不适用于多行文本（demo），如这里所述。
如果有人需要将多行文本垂直居中放置到图像中，以下是几种方法（方法1和方法2受此CSS技巧文章启发）
方法#1：CSS表格（FIDDLE）（IE8+（犬））
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
方法#2：容器上的伪元素（FIDDLE）（IE8+）
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
方法3：Flexbox（FIDDLE）（犬用）
CSS（上面的fiddle包含供应商前缀）：
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
其他回答
实际上，在这种情况下非常简单：对图像应用垂直对齐。因为它都在一行中，所以它实际上是您想要对齐的图像，而不是文本。
<!-- 将“垂直对齐：中间”样式从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>
您可以做的另一件事是将文本的行高度设置为＜div＞中图像的大小。然后将图像设置为垂直对齐：中间；
这是最简单的方法。
使用行高度：30px作为跨度，以便文本与图像对齐：
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.block-system-branding-block {
flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
justify-content: center;
align-items: center;
}
.flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
width: 300px;
margin: 10px;
text-align: left;
line-height: 20px;
font-size: 16px;
}
.flex-containercolumn > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block-
system-branding-block">
<div class="flex-containerrow">
<div>
<a href="/" rel="home" class="site-logo">
<img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
<div class="site-name ">
<a href="/" title="Home" rel="home">This is my sitename</a>
</div>
<div class="site-slogan "><span>Department of Test | Ministry of Test |
TGoII</span></div>
</div></div>
</div>
</div>
</body>
</html>
我同意，这可能令人困惑。尝试利用表格功能。我使用这个简单的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; }
请注意，您必须设置图像和表格容器的样式并调整其大小，以使其按您的需要工作。享受
