在不使用行高的情况下垂直对齐 Bootstrap 警报内的文本

Question

我希望在我的 Bootstrap 4 个警报中垂直对齐文本内容，关键是没有使用 line-height 并且最好没有绝对定位。

我的警报是这样的：

<div class="alert alert-info" role="alert">
        Your free trial will expire on <b>23-May-2022</b>. To retain your subscription after this date you can <a href="/admin/crmpicco-gvb-trial/plan">upgrade</a> to one of our paid plans.
</div>

我下面的 SCSS 声明有效：

.alert.alert-info {
  border: 1px solid #0f6fc5;
  background: #EAF2FA;
  color: #212529;
  min-height: 64px;
  display: flex;
  align-items: center;
}

但是，它会删除 <b> 和 <a> 标签周围的间距。

有没有一种方法可以解决此问题以在不对 b 和 a 元素使用 hacky margin 解决方案的情况下尊重间距？

Answer 1

可能将您的文本包含在一个跨度中？？这是你的意思吗？

.alert.alert-info {
  border: 1px solid #0f6fc5;
  background: #EAF2FA;
  color: #212529;
  min-height: 64px;
  display: flex;
  align-items: center;
  text-align:center;
}

<div class="alert alert-info" role="alert">
        <span>Your free trial will expire on <b>23-May-2022</b>. To retain your subscription after this date you can <a href="/admin/crmpicco-gvb-trial/plan">upgrade</a> to one of our paid plans.</span>
</div>

在不使用行高的情况下垂直对齐 Bootstrap 警报内的文本

Vertically align text inside a Bootstrap alert without using line-height

html

css

vertical-alignment

web-frontend

flexbox