Question

尝试垂直对齐以下卡片中的文本中心：

<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">
      <div class="card-body">
        This is some text within a card body.
      </div>
    </div>
  </div>
</div>

我完全清楚这里有很多类似的问题，但是我尝试了各种解决方案，但它们似乎都不适用于我的卡片。

我在父母，卡片和卡片身上尝试了“my-auto”。我尝试了“d-flex align-items-center h-100”和“justify-content-center”。还试图玩显示属性。我错过了什么？

Answer 1

以下是使用_Z3fooi的bootstrap 4文档的解决方案。阅读更多here

您需要知道的事情，

flexbox - ＆gt;使元素成为弹性框。

d-flex - 垂直对齐内容。

align-items-center - 水平对齐内容。

＆＃13;

justify-content-center

＆＃13;

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>

Bootstrap 4垂直对齐文本不会以卡片为中心

2 个答案: