html - 如何在网格对齐中垂直居中与图像相邻的文本？

Question

尝试在三横格对齐中将图像旁边的文本垂直居中对齐。尝试了很多事情，但发生了以下两种情况之一:
- 对于一行文本，文本垂直居中对齐，但如果文本多于一行，则在图像下方换行
- 对于多行文本，文本会正确换行，但不会垂直居中对齐，如提供的代码所示

有什么建议吗？

.tile-third {
  font-size: 18px;
  text-transform: uppercase;
  float: left;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 1%;
}

.tile-image {
  vertical-align:middle;
  float:left;
  margin-right: 1%;
  background-color:#000;
}

.tile-text {
}

<div class="tile-third">
    <a href="#">
        <img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-outside.png"/>
        <div class="tile-text">Department Description One (DD1)</div>
    </a>
</div>
<div class="tile-third">
    <a href="#">
        <img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-lowimpact.png"/>
        <span class="tile-text">Department Description Two</span>
    </a>
</div>
<div class="tile-third">
    <a href="#">
        <img class="tile-image" src="http://acmebeachandbike.com/wp-content/uploads/2016/05/icon-fun.png"/>
        <span class="tile-text">Department Description Three (DD3)</span>
    </a>
</div>

Answer 1

图像和文本位于 anchor 标记内， 更改 anchor 标记的样式以达到要求。

例子，

.tile-third a {
 height: 100%;
 display: flex;
 align-items: center;
}