Bootstrap 4 ile bir karttaki dikey hizalama elemanları

Question

Bir başlığın, bir paragrafın ve bir kartın içindeki bir bağlantının dikey olarak nasıl hizalanacağı anlaşılamıyor gibi görünüyor. Dikey hizalama yardımcı programlarını kullanmayı denedim, ancak yalnızca satır içi öğeler için. görüntü solda olması gerekiyordu

.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>

elementlerin geri kalanı yanında hizalanmış orta iken,:

Bu gibi benim kod görüntüsü.

Answer 1

Birkaç farklı çözüm var. İşte utils flexbox'a kullanarak tek yön ...

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

var