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

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

示例

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

Answer 2

这是您要寻找的吗？

.tile-third {
  display: inline-block;
  font-size: 18px;
  text-transform: uppercase;
  width: 30%;
}

.tile-third > a {
  align-items: center;
  display: flex;
}

.tile-image {
  background-color:#000;
  margin-right: 2%;
}

.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>

我将display下<a>标签的<div class="tile-third">值设置为flex，这是使事情正确对齐的一种简便方法。

这允许<img>中的<div>和<a>正确对齐。

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

2 个答案: