html - 如何垂直对齐带有两个按钮的图标？

Question

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

执行此操作的一个简单方法是 button group .不幸的是，图标被四舍五入并且按钮组中的按钮与组中的邻居有锐利的边缘并且图标被重新调整为与按钮相同的大小:

所以我试图摆脱按钮组。 Bootstrap 有一个用于 vertical alignment 的 align-middle 类.但我无法让它发挥作用。它看起来像这样:

我浏览并发现了这个:How to center an element horizontally and vertically?

答案列出了多种方法。我想坚持使用 bootstrap 并尽可能避免自定义 css。但是其中一个选项对我来说听起来非常不错:在 flexbox 容器中使用 justify 和 align。 Bootstrap 容器是 flexboxes，所以我将我的按钮包裹在一个容器中并添加了 align-items: center;证明内容:居中；。与上面的 align-middle 图片相同的结果。

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

fiddle :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 vertical align答案适用于行和列的网格。我不想介绍网格。

• Vertically align elements using CSS没有答案被接受，提示与我在正文中包含的答案相似。

Answer 1

不是 100% 确定你想要什么，但如果你想对齐按钮，那么你也可以使用 bootstrap flexbox 和 bootstrap text color 而不是额外的样式:(编辑:align -self-center 与 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>