在引导区警报内垂直对齐文本，不使用行高

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元素的破解margin解决方案的情况下，根据间距来解决这个问题？

Answer 1

可能将文本放大为span？？这就是你的意思吗？

.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>