如何將` <span>`字體真棒圖標彼此垂直</span>居中

Question

我有多個字體真棒圖標，我想垂直對齊，如此

#############################
icon icon icon icon icon icon
#############################

<div class="announcement-card-body modal-body card border-0">
        <span class="info fa fa-info-circle"></span>
        <span class="star fas fa-star fa-lg "></span>
 </div>

我已經嘗試過使用vertical-align: middle

這是我根據評論嘗試但沒有運氣

.info{
  display: flex; 
  align-items: center; 
  justify-content: center;
}
 .star {
  display: flex; 
  align-items: center; 
  justify-content: center;
}

並且

.info{
    display: flex;
    flex-direction: row;;
}

.star {
    display: flex;
   flex-direction: row;
}

Answer 1

您的display: flex和align-items: center必須位於容器上

.announcement-card-body {
  display: flex; 
  align-items: center; 
  justify-content: center;
}

<div class="announcement-card-body modal-body card border-0">
  <span class="info fa fa-info-circle"></span>
  <span class="star fas fa-star fa-lg "></span>
</div>