如何将FontAwesome下载图标放置在右侧并垂直居中

修复方案 #

你只需要在现有CSS基础上追加以下样式即可实现下载图标居右且垂直居中的效果：

.mock_name {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mock_name_text {
  flex: 1;
  margin-right: 12px;
}

.mock_pdf_icon {
  flex-shrink: 0;
}

样式说明 #

• .mock_name设置为Flex布局后，align-items: center自动实现内部元素垂直居中，justify-content: space-between将下载图标推到容器最右侧
• .mock_name_text的flex: 1属性让文本区域占满除图标外的所有剩余宽度，文本换行也不会挤压图标的位置
• .mock_pdf_icon的flex-shrink: 0避免容器宽度不足时图标被压缩变形

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