ブートストラップ4を持つカード内の垂直方向の整列要素

Question

カード内で1つのタイトル、段落、リンクを垂直に整列させる方法を理解できないようです。私はvertical-alignユーティリティを使ってみましたが、インライン要素のためだけです。残りの要素は、真中その横に並んでいる一方で、画像を、左側にあることになっている

.second { 
 
    background: gray; 
 
} 
 
.card-text { 
 
    font-size: 12px; 
 
} 
 
.card-title { 
 
    font-size: 29px; 
 
} 
 
.btn { 
 
    font-size: 12px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<div class="col-6"> 
 
    <div class="card"> 
 
    <div class="card-block"> 
 
     Some other text goes here 
 
    </div> 
 
    <div class="card-block"> 
 
     <div class="second p-5"> 
 
     <img src="https://placehold.it/200x200" class="rounded-circle float-left mr-4" height="200"> 
 
      <h4 class="card-title mb-2">John Doe</h4> 
 
      <p class="card-text mb-2">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. </p> 
 
      <a href="#" class="btn btn-primary py-1 px-3">Click Here</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

：

これは次のように私のコードが見えるものです。

Answer 1

いくつかの解決策があります。ここでは一つの方法は、フレキシボックスutilsパッケージを使用してい...

https://www.codeply.com/go/pB8HWQ0HCv

 <div class="col-6"> 
      <div class="card"> 
       <div class="card-block"> 
        Some other text goes here 
       </div> 
       <div class="card-block d-flex"> 
        <img src="https://placehold.it/200x200" class="rounded-circle mr-4 my-auto" height="200"> 
        <div class="second"> 
         <h4 class="card-title mb-2">John Doe</h4> 
         <p class="card-text mb-2">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. </p> 
         <a href="#" class="btn btn-primary py-1 px-3">Click Here</a> 
        </div> 
       </div> 
      </div> 
     </div> 

Demo