無法使 fa-icon 與 img 垂直對齊

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...我把噓聲放在所有東西上。

我猜/希望那是引導程序 4 行？ 將行變成一個彈性框，設置對齊項目居中，我會從 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>