引导图标在按钮中未垂直对齐答案

【问题标题】：bootstrap icons are not vertically aligned in button引导图标在按钮中未垂直对齐
【发布时间】：2021-04-27 15:36:56
【问题描述】：

当我尝试将新的引导图标添加到按钮时，图像似乎有些偏离：

我可以在底部添加一个边距，但这似乎是一种“解决方法”。如果我检查以下代码：https://icons.getbootstrap.com/icons/x-circle/，他们也没有使用任何解决方法，但它看起来符合预期。

这就是我添加按钮的方式：

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

我发现的一个细微差别是，如果通过图标字体而不是 svg 获取图标，它会在图像顶部增加一些空间，我无法通过任何填充控件来消除这些空间。

我逐步按照“安装”说明进行操作，其他组件按预期工作。 font-awesome 也很有魅力。

有什么办法可以做到这一点吗？

编辑：感谢大家迄今为止的回复。我经历了所有这些：

@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>

产生了一个如下所示的按钮：

@乔治：

<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>

这里我不得不将 col-1 扩展到 col-12。但它也产生了这个按钮：

@camaulay: 如果我使用 svg 并调整宽度和高度（都设置为 20）并将视图框定位调整为“0 0 20 20”，结果实际上看起来像预期的那样：

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="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> Cancel</a>

【问题讨论】：

您的 SVG 和文本大小相同吗？在示例代码中，它们都是 16px。

标签： html css bootstrap-5

【解决方案1】：

我认为它可以帮助你。

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

【讨论】：

【解决方案2】：

这是一个已知错误，请参阅https://github.com/twbs/icons/issues/82。很抱歉打扰您。

【讨论】：

【解决方案3】：

HTML

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

CSS

 .center { 
    text-align:center; 
    width:100%; 
}

【讨论】：

【解决方案4】：

实际上，在官方示例中，bi class 应用了一些额外的样式。此修复程序已在此 pull 中引入。

所以样式本身是这样的：

.bi {
  vertical-align: -.125em;
  width: 1em;
  height: 1em;
}

您可以在下面的第二个按钮上看到效果：

.bi {
  vertical-align: -.125em;
  width: 1em;
  height: 1em;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-x-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
</svg>
                Cancel
</button>

<button type="button" class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
</svg>
                Cancel
</button>

【讨论】：