html - 无法让 fa-icon 与图像垂直对齐

Question

所以我一直在思考如何让这些元素对齐，我已经非常接近了，但是统一标志的 svg 形状不愿意让步......有人看到我遗漏了什么吗？

会有很多元素，其中大部分是没有 fa-icon 的图像，所以我会多次需要它。

<div class="row">
    <fa-icon class="col icon" [icon]="['fab', 'angular']"></fa-icon>
    <fa-icon class="col icon" [icon]="['fab', 'github']"></fa-icon>
    <img class="col" src="./../../../assets/svg/unity-69-logo-svg-vector.svg">
</div>

img {
  display: block;
  background-color: black;
  color: white;
  width: 100px;
  height: 100px;
  margin: auto;
  padding: 25px;
}

.icon {
  display: inline-block;
  font-size: 40px;
  line-height: 100px;
  background-color: black;
  color: white;
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: bottom;
}

Answer 1

Flexbox...我把那个嘘放在所有东西上。

我猜/希望这是 bootstrap 4 行？将行变成 flexbox ，设置元素居中对齐，然后我会从 img 和 .icon 中删除显示属性

<div class="row d-flex align-items-center">
    <fa-icon class="col icon" [icon]="['fab', 'angular']"></fa-icon>
    <fa-icon class="col icon" [icon]="['fab', 'github']"></fa-icon>
    <img class="col" src="./../../../assets/svg/unity-69-logo-svg-vector.svg">
</div>