如何在Bootstrap 5按钮中垂直对齐SVG图标

这里有几种简单有效的实现方案，基于Bootstrap原生工具类或基础CSS完成：

方法1：用Bootstrap内置的align-middle工具类 #

这是最直接的方案，给SVG和旁边的文字都添加align-middle类，利用框架自带的垂直对齐样式：

<a href="#home" class="navbar-home">
    <button type="button" class="btn btn-outline-warning">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill align-middle" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"></path>
        <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"></path>
        </svg>
        <span class="align-middle">Home</span>
    </button>
</a>

方法2：通过Flex布局实现（更灵活） #

给按钮添加Bootstrap的d-flex和align-items-center类，将按钮转为Flex容器，内部元素会自动垂直居中，还能通过ms-2这类间距类控制SVG与文字的距离：

<a href="#home" class="navbar-home">
    <button type="button" class="btn btn-outline-warning d-flex align-items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"></path>
        <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"></path>
        </svg>
        <span class="ms-2">Home</span>
    </button>
</a>

方法3：自定义CSS样式 #

如果前两种方案不满足需求，可以编写自定义CSS强制设置垂直对齐：

.btn-icon-align svg,
.btn-icon-align .btn-text {
    vertical-align: middle;
}

然后给按钮和文字添加对应类：

<a href="#home" class="navbar-home">
    <button type="button" class="btn btn-outline-warning btn-icon-align">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"></path>
        <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"></path>
        </svg>
        <span class="btn-text">Home</span>
    </button>
</a>

优先推荐前两种方法，属于Bootstrap原生支持的实现，无需额外编写CSS，兼容性和可维护性更好。

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