写下这些跨度财产

span{
    display:inline-block;
    vertical-align:middle;
}

使用显示：内联块；当您使用vertical-align属性时。这些是关联的财产

在这些答案中还没有找到一个有余量的解决方案，所以这里是我对这个问题的解决方案。

只有当您知道图像的宽度时，此解决方案才有效。

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

您必须对两个元素应用垂直对齐：中间对齐，以使其完全居中。

＜div＞<img style=“vertical align:middle”src=“http://lorempixel.com/60/60/">完美居中</span></div>

被接受的答案确实将图标置于旁边文本x高度的一半左右（如CSS规范中所定义）。这可能足够好，但如果文本在顶部或底部有上升部分或下降部分，则可能看起来有点偏离：

左侧的文本未对齐，右侧的文本如上图所示。在这篇关于垂直对齐的文章中可以找到一个实时演示。

有人讨论过为什么垂直对齐：顶部在场景中起作用吗？问题中的图像可能比文本高，因此定义了线框的顶部边缘。垂直对齐：在span元素的顶部，然后将其放置在线框的顶部。

垂直对齐：中间和顶部之间行为的主要区别在于，第一个相对于框的基线移动元素（将其放置在需要实现所有垂直对齐的位置，因此感觉相当不可预测），第二个相对于线框的外部边界移动元素（更为有形）。

不知道为什么它不在导航浏览器上显示，但我通常在尝试显示带有图像和居中文本的标题时使用这样的代码段，希望它有所帮助！

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>

该代码适用于IE和FF：

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

多线解决方案：

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

适用于所有浏览器和ie9+