引导4个垂直对齐文本将不会集中在卡

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

下面是使用自举4文档flexbox的溶液。更多here

你需要知道什么，

d-flex - >使元素的Flexbox的。

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>