Html 如何将图标与两个按钮垂直对齐？

我想在两个按钮之间放置一个图标。图标比按钮大，我希望它们的中心在一条线上。这意味着图标位于按钮上方和下方

做这件事的一个简单方法是。不幸的是，图标被舍入，按钮组中的按钮与组中的相邻按钮具有锐利的边缘，并且图标被重新缩放为与按钮相同的大小：

所以我试着摆脱按钮组。Bootstrap有一个

align middle

类。但我不能让它工作。看起来是这样的：

我浏览了一下发现：

答案列出了各种方法。我想坚持使用bootstrap，尽可能避免定制css。但其中一个选项听起来非常好：在flexbox容器中使用justify和align。引导容器是FlexBox，所以我将按钮包装在一个容器中，并添加了

align items:center；证明内容：中心。与上面的
align middle
图片的结果相同

我尝试了各种其他css组合，但没有成功。以上三种方法对我来说似乎是最干净的，所以我在这里介绍了它们

小提琴：

html（假设您有引导和FontStrap）：







潜在重复（这是一个非常常见的问题）：


答案适用于行和列的网格。我不想引入网格

没有答案被接受，提示与我在正文中给出的答案相似

无法100%确定您想要什么，但是如果您想对齐按钮，那么您也可以使用引导
flexbox
和引导文本颜色，而不是其他样式：（编辑：
align self-center
vs
align items center
）

。。。
...
...
...
...





不能100%确定您想要什么，但是如果您想对齐按钮，那么您也可以使用引导
flexbox
和引导文本颜色，而不是其他样式：（编辑：
align self-center
vs
align items center
）

。。。
...
...
...
...





这看起来很整洁，符合我的要求。但它会根据按钮的大小调整问题图标的大小。图标应保持比按钮大。但是所有图标的中点（你可以称之为它们的重心）应该在一条线上。@lhk这就是你想要的吗？是的，这太棒了：）这看起来很整洁，它完成了我想要的对齐。但它会根据按钮的大小调整问题图标的大小。图标应保持比按钮大。但是所有图标的中点（你可以称之为它们的重心）应该在一条线上。@lhk这就是你想要的吗？是的，这太棒了：）
<!-- using a flexbox container + css -->
<div class="container" style="align-items: center; justify-content: center;">
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-times-circle" style="color:red;"></i>
  </button>
  <i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i>
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-check-circle" style="color:green;"></i>
  </button>
</div>
<br>

<!-- using the bootstrap align-middle class -->
<div class="align-middle">
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-times-circle" style="color:red;"></i>
  </button>
  <i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i>
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-check-circle" style="color:green;"></i>
  </button>
</div>
<br>

<!-- using a button group -->
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-times-circle" style="color:red;"></i>
  </button>
  <span><i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i></span>
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-check-circle" style="color:green;"></i>
  </button>
</div>

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>