Bootstrap 在行中显示 svg 和文本

【问题标题】：Bootstrap show svg and text in rowBootstrap 在行中显示 svg 和文本
【发布时间】：2022-11-27 14:06:56
【问题描述】：

我需要在行中显示带有 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>

它的显示是这样的

我需要实现

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

将 align-items:center 与 display:flex 一起使用。另外，给图标一个margin-right。

   <button class='btn btn-primary' style='background-color:purple; display: flex;align-items:center;'>
            <div style='text-align:center;'>
                <img src="https://vaibhavvijay.me/images/envelope-white.svg" class="img-fluid" style='margin-right:8px;' width="20px" height="20px">
            </div>
            Top Pick
    </button>

【讨论】：

谢谢，但图像和文字仍然没有水平居中。也尝试在按钮中使用文本对齐