如何使`<span>`字体真棒图标彼此垂直居中答案

【问题标题】：How to center `<span>` font awesome icons vertically with one another如何使`<span>`字体真棒图标彼此垂直居中
【发布时间】：2019-03-14 05:01:54
【问题描述】：

我有多个字体很棒的图标，我想垂直对齐，所以

#############################
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

这是我基于 cmets 尝试过的，但没有运气

.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;
}

【问题讨论】：

试试fixed width icons
试试display: flex; flex-direction: row
使用弹性盒子.flex { display: flex; align-items: center; justify-content: center; }
你能加入minimal, complete, and verifiable example吗？
您的display: flex 需要在图标的容器中

标签： html css font-awesome

【解决方案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>

【讨论】：

这将它们水平居中于容器内，上下排列。如我的示例所示，如何将它们并排对齐？
您是否删除了单个图标上的其他 flex 样式？这个答案应该是正确的。
我不确定您所说的并排对齐是什么意思。如果您试图将它们分散到您的容器中，您可能需要justify-content: space-between。如果您希望它们都具有相同的宽度，您可能需要将flex: 1 0 auto; text-align: center; 放在每个图标上。
这个解决方案确实有效，容器中的card 类是问题