Bootstrap 4 垂直对齐文本不会在卡片上居中

Answer 1

这里是使用 Bootstrap 4 文档的解决方案

flexbox

。阅读更多这里

你需要知道什么，

d-flex

-> 使元素成为弹性框。

align-items-center

- 垂直对齐内容。

justify-content-center

- 水平对齐内容。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="row text-center h-100">
  <div class="col-md-3 text-center my-auto">
    <div class="card card-block d-flex" style="height: 120px">
      <div class="card-body align-items-center d-flex justify-content-center">
        This is some text within a card body.
      </div>
    </div>
  </div>
</div>

Answer 2

我错过了什么？

行高：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="row text-center h-100">
  <div class="col-md-3 text-center my-auto">
    <div class="card card-block justify-content-center" style="height: 120px; line-height:120px;">
      <div class="card-body">
        This is some text within a card body.
      </div>
    </div>
  </div>
</div>

Answer 3

通过这种方式，您可以将卡片标题对齐到中心。

 .card-title-center{
        float: none !important;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

 <div class="card col-12 text-center">
    <div class="card-header bg-secondary">
        <h3 class="card-title card-title-center">Card Title</h3>
    </div>
</div>

Answer 4

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="row text-center h-100">
  <div class="col-md-3 text-center my-auto">
    <div class="card card-block d-flex" style="height: 120px">
      <div class="card-body align-items-center d-flex justify-content-center">
        This is some text within a card body.
      </div>
    </div>
  </div>
</div>

作者：万能钥匙