Bootstrap实现按钮内SVG与文字同行排列的问题

需求：制作包含SVG图标与文字的按钮，要求图标和文字在同一行且垂直居中显示。

当前实现代码：

<button class='btn btn-primary' style='background-color:purple; display: flex;'>
    <div style='text-align:center;'>
        <img src="assets/icons/Icon awesome-crown.svg" class="img-fluid" width="20px" height="20px">
    </div>
    Top Pick
</button>

当前问题：图标与文字未垂直居中，显示效果不符合预期。

调整方案 #

只需给按钮的flex布局补充垂直对齐属性，同时可简化嵌套结构，具体修改如下：

优化后的代码 #

<button class='btn btn-primary' style='background-color:purple; display: flex; align-items: center; gap: 8px;'>
    <img src="assets/icons/Icon awesome-crown.svg" class="img-fluid" width="20px" height="20px">
    Top Pick
</button>

关键调整说明 #

• align-items: center：让flex容器内的图标和文字在垂直方向居中对齐，解决错位问题。
• gap: 8px：为图标和文字添加横向间距，优化视觉效果（间距值可按需调整）。
• 移除冗余嵌套div：原代码中的外层div无必要，直接保留img即可简化结构。

若需保留原有div（如存在额外样式需求），仅添加align-items: center和gap属性也可实现预期效果：

<button class='btn btn-primary' style='background-color:purple; display: flex; align-items: center; gap: 8px;'>
    <div style='text-align:center;'>
        <img src="assets/icons/Icon awesome-crown.svg" class="img-fluid" width="20px" height="20px">
    </div>
    Top Pick
</button>

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