将图像与 flex 容器中的文本对齐答案

【问题标题】：Align image with text in flex container将图像与 flex 容器中的文本对齐
【发布时间】：2018-04-14 17:37:31
【问题描述】：

我有以下 HTML 位，由于某种原因，文本显示在图像下方而不是旁边

如下所示：

.fbstats {
  font-size: 12px;
}

.fbstats .likeimg {
  width: 20px;
}

          <div class="card-action" layout="row">
            <div class="fbstats" layout="column" layout-align="right start" flex="50">
              <img class="likeimg" src="img/like.png" /> 126
            </div>
            <div layout="column" flex="50" layout-align="left end">
              <a href="#">צפה בפוסט</a>
            </div>
          </div>

最终结果如下所示：

我尝试过使用vertical-align 和display: inline-flex，但不起作用。

【问题讨论】：

标签： html css flexbox material-design angular-material

【解决方案1】：

默认情况下，Div 有一个块显示，导致它们转到前一个的底部。检查这个：

.card-action > div {
    display: inline-block;
}

【讨论】：

【解决方案2】：

尝试像这样将display:flex 添加到容器中：

.card-action {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.fbstats {
  font-size: 12px;
}

.fbstats .likeimg {
  width: 20px;
}

<div class="card-action" layout="row">
  <div class="fbstats" layout="column" layout-align="right start" flex="50">
    <img class="likeimg" src="img/like.png" /> 126
  </div>
  <div layout="column" flex="50" layout-align="left end">
    <a href="#">צפה בפוסט</a>
  </div>
</div>

【讨论】：