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>

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

1 个答案: