vertical-align: middle不起作用？但是，vertical-align: top却可以起作用。
span{
vertical-align: middle;
}<div>
<img src="https://via.placeholder.com/30" alt="small img" />
<span>Doesn't work.</span>
</div>实际上，在这种情况下很简单：将垂直对齐应用于图像。由于它都在一行中，您真正想要对齐的是图像而不是文本。
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
<span style="">Works.</span>
</div>在FF3中测试过。
现在您可以使用flexbox来实现此类布局。
.box {
display: flex;
align-items:center;
}<div class="box">
<img src="https://via.placeholder.com/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>
为了使此方法在各个浏览器中正常工作，您需要对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%);
display:table 和 display:table-cell CSS选择器效果很好，但在IE7及以下版本中无法正常工作。 在苦苦挣扎了几个小时后，我决定不必再考虑那些仍在使用IE7-的人。 - bannceejustify-content: center;，并且为了间距（而不使用 <br/> 标签），您可能还想加入 padding: 1em;。对于我们现代浏览器开发人员来说，这是一个很好的更新。 - CSS为了让它完美居中，您需要将 vertical-align: middle 应用于两个元素。
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>被接受的答案将图标置于其旁边文本的x高度的一半位置（在CSS规范中定义），这可能已经足够好了，但是如果文本具有突出的上行或下行，则可能看起来有点不协调：
左侧的文本未对齐，右侧如上所示。可以在这篇有关垂直对齐的文章中找到实时演示。
有人谈论过为什么在这种情况下使用 vertical-align: top 吗？问题中的图片可能比文本更高，因此定义了行框的顶部边缘。然后，在span元素上使用vertical-align: top就只是将其定位在行框的顶部。
vertical-align: middle和top之间的主要行为差异在于，前者相对于盒子的基线移动元素（该基线放置在所需的所有垂直对齐处，因此感觉相当不可预测），而后者则相对于行框的外部边界移动元素（这更具体）。
这个被接受的答案中使用的技术只适用于单行文本 (演示)，而不适用于多行文本 (演示) - 正如那里所指出的。
如果有人需要将多行文本垂直居中到图像上，这里有几种方法 (第1和第2种方法灵感来自于 这篇 CSS-Tricks 文章)
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
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 */
}
CSS（上述fiddle包含供应商前缀）：
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
这段代码可以在IE和FF中正常工作：
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
如果要使这个工作生效，您需要将 line-height 设置为div的高度。
记录一下，针对SPAN标签的对齐“命令”不起作用，因为它是一个内联标签，而不是一个块级标签。像对齐、边距、填充等这些东西在内联标签上都不起作用，因为内联标签的目的不是破坏文本流。
CSS将HTML标签分为两组：内联和块级。搜索“css block vs inline”，会出现一篇很好的文章...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
（理解核心CSS原则是避免烦恼的关键）
text-align和vertical-align（除了在旧版中用于td元素的应用之外）专门用于inline和inline-block元素（例如span，img等）。 - Kevin Peno基本上，您将需要深入了解CSS3。
-moz-box-align: center;
-webkit-box-align: center;
使用line-height:30px为span元素设置行高，以便文本与图像对齐：
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
vertical-align: middle应用于两个元素，则vertical-align: middle方法仅有效。 - Mori