与bootstrap4按钮垂直对齐作为锚点[重复]答案

【问题标题】：Vertical align with bootstrap4 buttons as anchors [duplicate]与bootstrap4按钮垂直对齐作为锚点[重复]
【发布时间】：2021-03-02 00:39:41
【问题描述】：

我正在尝试使用 bootstrap4 获得 3 个按钮，其中一个大按钮在左侧，2 个小按钮在另一个按钮的顶部，并且正在使用 btn-groups。我希望左侧的大按钮占据整列（即，另一个按钮顶部的其他两个按钮之和的高度），并将按钮的所有文本居中，如下所示：

+-------+-------+ | | 2 | | 1 +-------+ | | 3 | +-------+-------+

如果我使用按钮效果很好，但是当我使用锚点时，我无法让第一个大按钮的内容垂直居中。

有效的是：

<div class="btn-group btn-block">
  <button type="button" class="btn btn-primary p-5 w-50">1</button>
  <div class="btn-group-vertical w-50">
    <button type="button" class="btn btn-secondary p-5">2</button>
    <button type="button" class="btn btn-success p-5">3</button>
  </div>
</div>

给出我想要的输出，“1”垂直居中。但是当我把它改成

<div class="btn-group btn-block">
  <a href="#" role="button" class="btn btn-primary p-5 w-50">1</a>
  <div class="btn-group-vertical w-50">
    <a href="#" role="button" class="btn btn-secondary p-5">2</a>
    <a href="#" role="button" class="btn btn-success p-5">3</a>
  </div>
</div>

“1”不再垂直对齐，而按钮仍占据应有的所有空间。我尝试了很多技巧，但都没有给出预期的结果（我可以让左按钮居中但不占据整列）。从按钮到锚点时我错过了什么？我可能可以使用 onlick 或其他方法，但我真的很想了解当我去锚点时会发生什么。

[编辑：虽然这被标记为其他垂直对齐问题的重复，但这个问题是关于从按钮到锚点时会发生什么的具体问题。 @Bdeering 的回答完美地表明问题是在锚定时失去弹性行为]

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

不知道为什么这不能正常工作，但您可以使用一些自定义样式来修复它。

只需将其添加到您的 css 中，每个锚点内的文本就会居中：

a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

（或在您的 html 中使用样式标签）

<style>
  a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

【讨论】：