如何将现有HTML/CSS代码中的SVG图片堆叠在对应文字上方

你目前的.flash-info使用了flex默认的横向排列，所以图标和文字会在同一行显示，只需做两处CSS修改即可实现图标在上、文字在下的堆叠效果：

• 给.flash-info添加flex-direction: column属性，将flex布局改为纵向排列
• 将.flash-info svg的margin-right:7px替换为margin-bottom: 6px（数值可根据需要调整），改为设置图标和文字之间的垂直间距

修改后的完整CSS代码如下：

.flash-infos {
  padding:6px 10px;
  background:#333;
  color:#FFF;
  display:flex;
  width:100%;
  max-width:100%;
  align-items:center;
  
}
.flash-info  {
  padding:0;
  display:flex !important;
  align-items:center;
  justify-content:center;
  flex-direction: column; /* 新增属性，设置纵向堆叠 */
}
.flash-info svg {
  fill:#FFF;
  margin-bottom: 6px; /* 替换原margin-right，设置图标和文字的垂直间距 */
  width:auto;
  height:28px;
} 
.flash-info.truck svg  {
  height:30px;
}
.flash-info-pulse {
  animation: flash-pulse 2s infinite;
}
@keyframes flash-pulse {
  0% {
    opacity:0;
  }
  
  50% {
    opacity:1;
  }

  100% {
    opacity:1;
  }
}

内容的提问来源于stack exchange，提问作者bain