logo标签列表

Bootstrap 图标在按钮中无法垂直对齐

htmlcssbootstrap-5
6

当我尝试将新的bootstrap图标添加到按钮中时，似乎图像有些偏移：

输入图像描述

我可以在底部添加一个边距，但这似乎太过于“变通”。如果我检查https://icons.getbootstrap.com/icons/x-circle/上的代码，他们也没有使用任何变通方法，但看起来效果如预期。

这是我如何添加我的按钮的方式：

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

我注意到一个小差别，如果通过icon字体获取图标而不是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>

结果是一个看起来像这样的按钮：enter image description here

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

这里我需要将col-1扩展到col-12，但结果是出现了这个按钮： enter image description here

@camaulay: 如果我使用SVG并进行宽度和高度的调整（将两者都设置为20），并将viewbox定位调整为“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> 标签会导致这种奇怪的行为？

如果我将边框类添加到“图片”，那么就会看到图像顶部有一些额外空间：

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

enter image description here

2
你的 SVG 和文本大小一样吗？在示例代码中，它们都是 16px。 - cam
4个回答
7

我认为这可以帮助你。

<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>
1
我终于找到了答案...而且我正要粘贴与你完全相同的解决方案！@r-steigmeier：你应该将这个标记为正确答案。 - Skratt
3

实际上，在官方示例中，bi类应用了一些额外的样式。修复已在此拉取请求中引入。

因此，样式本身类似于这样：

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

2

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%; 
}
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接