引导卡中的文本垂直对齐

Question

我有下面的卡片，我正在尝试垂直居中对齐文本"轻卡标题"；，我添加了align-middle，但没有效果。文本如何垂直居中对齐？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card bg-light mb-3" style="max-width: 18rem;;">
<div class="card-header">Total Views</div>
<div class="card-body" style=" height:150px">
<h5 class="card-title text-center align-middle">Light
card title</h5>
</div>
</div>

Answer 1

你能检查一下下面的代码吗？希望对你有用。在Bootstrap 5文档中；非内联内容"；(像<div>和更多(，使用我们的flex box实用程序。有了这些实用程序的帮助，您可以轻松地将文本垂直和水平居中对齐。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card bg-light mb-3" style="max-width: 18rem;;">
<div class="card-header">Total Views</div>
<div class="card-body d-flex align-items-center justify-content-center" style=" height:150px">
<h5 class="card-title">Light card title</h5>
</div>
</div>

Answer 2

有几种不同的方法可以使内容居中对齐。这里有一个简单的卡片内容的方法。。。

<div class="card bg-light mb-3 justify-content-center" style="max-width: 18rem;;">
<div class="card-header">Total Views</div>
<div class="card-body d-flex" style="height:150px">
<h5 class="card-title m-auto">Light card title</h5>
</div>
</div>

• 使用d-flex显示：flex
• 使用m-auto进行自动边距

演示

相关：引导程序4垂直对齐文本赢得'；t以卡片为中心