如何在按钮内垂直对齐 svg - bootstrap 5

Question

如何在按钮内垂直对齐 svg？ 我正在使用 bootstrap 来设计样式。

<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" 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>
   Home
   </button>
</a>

Answer 1

您可以使 svg 的包装器弯曲并使项目中心垂直居中对齐，并使内容中心对齐水平居中，您可以在Bootstrap 文档中阅读更多内容。 这是您的案例的示例

<a href="#home" class="navbar-home">
    <button type="button" class="btn btn-outline-warning d-flex align-items-center justify-content-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>
   Home
   </button>
</a>

在这种情况下，svg 的包装器是按钮标签，因此您可以将 class 添加到按钮以使按钮内的内容居中。