Question

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

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

因此，我试图摆脱按钮组。 Bootstrap具有vertical alignment的align-middle类。但是我无法使它正常工作。看起来像这样：

我浏览并找到了这个：How to center an element horizontally and vertically?

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

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

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

html（假设您具有引导程序和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％确定想要的内容，但是如果要对齐按钮，则还可以使用引导flexbox和引导文本颜色来代替其他样式：（编辑：align-self-center与{ {1}}）

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>

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

1 个答案: