Bootstrap 卡片中的垂直对齐文本

Question

我有以下卡片，我试图垂直居中对齐文本“Light card title”，我添加了 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 document 中，他们提到要垂直居中“非内联内容”（如 <div>s 等），请使用我们的 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>

对 display:flex

d-flex

对自动边距使用 m-auto

Demo

Bootstrap 卡片中的垂直对齐文本

Vertical align text in Bootstrap card

twitter-bootstrap

bootstrap-5