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

Question

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

一个简单的方法就是按钮组 。 不幸的是，该图标是四舍五入的，并且按钮组中的按钮对该组中的邻居具有尖锐的边缘，并且将图标缩放为与按钮相同的大小：

因此，我试图摆脱按钮组。 Bootstrap有一个align-middle类用于垂直对齐 。 但是我无法使它正常工作。 看起来像这样：

我浏览后发现： 如何将元素水平和垂直居中？

答案列出了多种方法。 我想坚持使用bootstrap，并尽可能避免自定义css。 但是，其中一种选择对我来说听起来真的很不错：在flexbox容器中使用对齐和对齐。 Bootstrap容器是flexbox，因此我将按钮包装在容器中并添加了align-items: center; justify-content: center; align-items: center; justify-content: center; 。 与上面align-middle图片相同的结果。

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

小提琴： https : //jsfiddle.net/aq9Laaew/285443/

html（假设您具有bootstrap和fontawesome）：

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

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

• Bootstrap垂直对齐答案适用于行和列的网格。 我宁愿不介绍网格。

• 使用CSS垂直对齐元素没有答案被接受，提示类似于我在正文中包含的答案。

Answer 1

无法100％确定所需的内容，但如果要对齐按钮，则还可以使用bootstrap flexbox和bootstrap文本颜色代替其他样式：（编辑： align-self-center vs align-items-center ）

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

 <link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="d-flex justify-content-start align-items-center"> <button type="button" class="btn btn-outline-secondary"> <i class="far fa-times-circle text-danger"></i> </button> <i class="far fa-question-circle fa-5x" style="color: lightskyblue"></i> <button type="button" class="btn btn-outline-secondary"> <i class="far fa-check-circle text-success"></i> </button> </div> <br/> <div class="d-flex justify-content-start"> <button type="button" class="btn btn-outline-secondary align-self-center"> <i class="far fa-times-circle text-danger"></i> </button> <i class="far fa-question-circle fa-4x" style="color: lightskyblue"></i> <button type="button" class="btn btn-outline-secondary align-self-center"> <i class="far fa-check-circle text-success"></i> </button> </div>