如何在按钮引导5中垂直对齐svg？
如何在按钮引导5中垂直对齐svg？
提问于 2022-10-11 00:20:52
如何在按钮内垂直对齐svg？我在用引导来设计风格。
<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>Stack Overflow用户
回答已采纳
发布于 2022-10-11 02:19:56
您可以使svg的包装器弯曲，并使对齐项中心垂直对中，并将内容中心对齐为水平中心，您可以在引导文档上阅读更多内容。下面是您的案例的示例
<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的包装器是按钮标记，因此您可以向按钮中添加类以使按钮中的内容对齐。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74021791
复制相关文章
相似问题
腾讯云开发者
