引导程序图标未在按钮中垂直对齐 [英] bootstrap icons are not vertically aligned in button

问题描述

当我尝试将新的引导程序图标添加到按钮时，图像似乎有些不正确:

我可以在底部添加一个边距，但这似乎是很多变通"的方法.如果我检查以下代码:

@乔治:

 < a href =#"type ="button"class ="d-flex调整内容中心对齐项中心col-12 btn btn-danger">"i class ="bi bi-x-circle pr-2">;取消</a> 

在这里，我不得不将col-1扩展到col-12.但是然后它也产生了这个按钮:

@camaulay:如果我使用svg并调整宽度和高度(均设置为20)，并将视图框的位置调整为"0 0 20 20"，则结果实际上看起来像预期的那样:

 < svg xmlns ="http://www.w3.org/2000/svg"宽度="20"高度="20"fill ="currentColor"class ="bi bi-x-circle"viewBox ="0 0 20 20" 

所以我可以将其标记为正确答案.但是，我想知道为什么< i> -Tag会导致如此奇怪的行为?

如果我将边框类别添加到图片"那么人们会发现图像上方有一些额外的空间:

 < a href =#"type ="button"class ＝"btn btn-danger"＞"i class ＝"bi bi-x-circle pr-2 border"＞/i.取消</a> 

解决方案

这是一个已知的错误，请参见https://icons.getbootstrap.com/icons/x-circle/ they are also not using any workarounds but there it looks as expected.

This is how I add my button:

<a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle"></i> Cancel</a>

One slight difference I spotted is that if one gets the icon through the icon font instead of the svg, it adds some space on top of the image which I can't get rid off by any padding controls.

I followed the "installation" instructions step-by-step and other components work as expected. Also font-awesome works like a charm.

Any ideas how to get this right?

EDIT: thank you all for your replies so far. I went through all of them:

@vishal:

<div style="text-align:center; width:100%;">
    <a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle"></i> Cancel</a>
</div>

yielded in a button looking like this:

@George:

<a href="#" type="button" class="d-flex justify-content-center align-items-center col-12 btn btn-danger"><i class="bi bi-x-circle pr-2"></i> Cancel</a>

Here I had to extend col-1 to col-12. But also then it yielded this button:

@camaulay: if I use the svg and make an adjustment to width and height (set both to 20) and adjust the viewbox positioning to "0 0 20 20", the result actually looks as expected:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 20 20">

So I could mark this as the correct answer. Nevertheless I'm wondering why the <i>-Tag does result in such strange behaviour?

If I add the border class to the "picture" then one sees that there is some extra space on top of the image:

<a href="#" type="button" class="btn btn-danger"><i class="bi bi-x-circle pr-2 border"></i> Cancel</a>

解决方案

This is a known bug, see https://github.com/twbs/icons/issues/82. Sorry for bothering you.

这篇关于引导程序图标未在按钮中垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！