Question

使用引导程序创建卡片4.使用<h>标签时，卡片标题似乎垂直居中。从我的示例代码中可以看出，我已经尝试了许多引导类来对齐，但似乎没有一个可以解决问题。我最好的猜测是align-middle，但没有结果。我还试过.d-flex + align-self-center

我可以用CSS做到这一点，但必须有一个BS4解决方案而不创建自定义CSS。有没有办法用BS4做到这一点？

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card border-info" style="width: 100%;">
  <div class="card-header text-white bg-info">
    <h6 class="align-middle">Example Title</h6>
  </div>
  <div class="card-body">
  </div>
</div>

＆＃13;

Answer 1

喜欢这个？

在您的d-flex justify-content-center

中添加了card-header

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card border-info" style="width: 100%;">
  <div class="card-header text-white bg-info">
    <h6 class="mb-0">Example Title</h6>
  </div>
  <div class="card-body">
  </div>
</div>

Answer 2

将d-inline或d-inline-block类添加到h6

<div class="card border-info" style="width: 100%;">
<div class="card-header text-white bg-info">
<h6 class="d-inline-block align-middle">Example Title</h6>
</div>
<div class="card-body">
</div>
 </div>

这对我有用

垂直中心对齐BS4卡标题

2 个答案: