在 Bootstrap 警报中垂直对齐文本而不使用行高

发布于 2025-01-20 21:17:34 字数 793 浏览 2 评论 0原文

我希望在 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 元素使用 hacky margin 解决方案？

原文

I am looking to vertically align text content inside my Bootstrap 4 alerts, crucially without using line-height and ideally without absolute positioning.

My alert looks like this:

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

My SCSS declaration below does work:

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

However, it removes the spacing around then <b> and <a> tags.

Is there a way to fix this to respect the spacing without a hacky margin solution to the b and a elements?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

姐不稀罕 2025-01-27 21:17:34

也许将您的文本纳入跨度？这是你的意思吗？

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

maybe enlcosed your text to a span?? Is this what you mean?

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

回复收藏 0 原文

~没有更多了~