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> 等），请使用我们的弹性盒实用程序。借助这些实用程序，您可以轻松地将文本垂直和水平居中对齐。

<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

有 several different ways 来居中对齐内容。这是卡片内容的简单方法...

  <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 作为自动边距

Demo

相关：Bootstrap 4 vertical align text won't center on card

Bootstrap 卡片中的垂直对齐文本

2 个答案: