Bootstrap 4 div（使用 btn 类）中的文本垂直对齐，使用 CSS Grid（并且没有 flexbox）时没有固定高度

Posted 2023-03-05

【中文标题】Bootstrap 4 div（使用 btn 类）中的文本垂直对齐，使用 CSS Grid（并且没有 flexbox）时没有固定高度

【英文标题】：Vertical align text in Bootstrap 4 divs (with btn class) with no fixed height when using CSS Grid (and no flexbox)

【发布时间】：2019-07-31 22:29:38

【问题描述】：

我有一个带有 Bootstrap 4 div 的 CSS 网格，其中包含 btn 标签。 div 垂直加宽（拉伸）。我只需要在中间垂直对齐文本。

我知道我可以使用 flexbox，但在这个项目中我不能。

这里是一个例子：https://jsfiddle.net/fredhors/0sw2uLay/5/

.grid-wrapper 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-wrapper">
  <div class="btn btn-primary">Content A</div>
  <div class="btn btn-warning">Content B</div>
  <div class="btn btn-danger">Content C</div>
  <div class="btn btn-success">Content D</div>
</div>

【问题讨论】：

不，@kukkuz，因为我失去了每个人的 100% 高度。

我使用 pseudo elements 使文本居中 - 保持 grid items 的 100% 高度...

【参考方案1】：

如果您必须将整个btn 居中，只需在grid-wrapper 上使用align-items: center - 请参见下面的演示：

.grid-wrapper 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;
  align-items: center; /* center vertically */

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-wrapper">
  <div class="btn btn-primary">Content A</div>
  <div class="btn btn-warning">Content B</div>
  <div class="btn btn-danger">Content C</div>
  <div class="btn btn-success">Content D</div>
</div>

如果您希望背景拉伸并具有垂直对齐，如果您应该为btn 使用flexbox 会更容易 - 请参见下面的演示：

.grid-wrapper 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;


.grid-wrapper > .btn 
  display: flex;
  align-items: center;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-wrapper">
  <div class="btn btn-primary">Content A</div>
  <div class="btn btn-warning">Content B</div>
  <div class="btn btn-danger">Content C</div>
  <div class="btn btn-success">Content D</div>
</div>

---

我知道我可以使用 flexbox，但在这个项目中我不能。

如果您不能为此使用 flexbox，您可以使用 pseudo 元素 将文本在 grid items 中居中 - 参见下面的演示：

.grid-wrapper 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;


.grid-wrapper .btn:after 
  display: inline-block;
  vertical-align: middle;
  content: '';
  height: 100%;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-wrapper">
  <div class="btn btn-primary">Content A</div>
  <div class="btn btn-warning">Content B</div>
  <div class="btn btn-danger">Content C</div>
  <div class="btn btn-success">Content D</div>
</div>

【讨论】：

谢谢@kukkuz。如果我有一个巨大的列表（数千个 div），我能问你在性能方面什么是最好的吗？ Flexbox 还是伪元素？ （Chrome、Safari）。

我通常会使用 flexbox，因为它在现代浏览器中很容易并且得到很好的支持......虽然我不确定性能

你认为我可以在网络上的某个地方对其进行测试吗？

我猜如果有成千上万的 div 将不是一个好的用户体验设计;)