为什么不垂直对齐：中间工作？然而，垂直对齐：顶部确实有效。
跨度{垂直对齐：中间；}＜div＞<img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</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>
其他回答
不知道为什么它不在导航浏览器上显示，但我通常在尝试显示带有图像和居中文本的标题时使用这样的代码段，希望它有所帮助！
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>
以下是一些简单的垂直对齐技术：
单行垂直对齐：中间
这很简单：将文本元素的行高度设置为等于容器的行高度
<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 bug对我们有利。在容器上设置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%);
2022年，浏览器支持率达到96%，我很惊讶没有人建议使用网格布局。
在本JSFiddle中，3行是实现OP目标所需的全部内容（但提供了多条路线以供比较）：
div {
display: grid;
grid-template-columns: min-content max-content;
align-items: center
}
一个额外的UI细节将包括可选的gap属性的使用，该属性允许调整父网格容器（div）中每个网格项之间的空间。
网格布局的优势
轻松垂直和水平对齐网格项网格项之间的空间调制任何大小的图像（使用最小内容）和文本长度（使用最大内容的一行或使用最小内容的换行（未在fiddle中显示））都可以工作-无需在CSS中硬编码图像尺寸（两种用法都在JSFiddle中演示）现代方法
网格布局的缺点
较旧的浏览器支持更具挑战性网格布局通常需要更有经验的开发人员来正确实现，而不是像块/内联块显示那样简单
第二部分{显示：柔性；对齐项目：居中；}＜div＞<img src=“http://lorempixel.com/30/30/“alt=”小img“/><span>它起作用了</span></div>
显示带对齐项目的柔性：居中；是垂直对齐项目的最佳方式
第二部分{显示：柔性；对齐项目：居中；}＜div＞<img src=“https://via.placeholder.com/30“alt=”小img“/><span>它起作用</span></div>
