如何将` <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>