如何在图片旁垂直对齐文本？

您可以做的另一件事是将文本的 line-height 设置为 <div> 中图片的大小。然后将图片设置为 vertical-align: middle;

这真的是最简单的方法。

目前这些回答中还没有使用margin的解决方案，所以这是我针对此问题提出的解决方案。

这个解决方案仅在您知道图像宽度的情况下有效。

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;
}

请写下这些属性

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

当你使用 vertical-align 属性时，请使用 display:inline-block;。这些是相关联的属性。

background:url(../images/red_bullet.jpg) left 3px no-repeat;

通常我使用3像素代替top。通过增加/减少该值，可以将图像更改为所需的高度。

在CSS中使用flex属性。

使用align-items:center;来垂直居中文本，在flex中使用它。如果您想要水平居中文本，请在flex中使用justify-content:center;。

div{
  display: flex;
  align-items: center;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

在CSS中使用 table-cell。

div{
  display: table;
}
div *{
  display: table-cell;
  vertical-align: middle;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

<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以上版本

我同意，这可能会让人感到困惑。尝试利用表格功能。我使用这个简单的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; }