Pionowe wyrównanie elementów na karcie za pomocą Bootstrap 4

Question

Nie można wymyślić, jak wyrównać w pionie jeden tytuł, akapit i łącze wewnątrz karty. Próbowałem używać narzędzi do wyrównania pionowego, ale są one przeznaczone tylko dla elementów śródliniowych.

To właśnie mój kod wygląda następująco:

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

Obraz ma być po lewej stronie, natomiast reszta elementów jest środkowy wyrównany obok niego.

Answer 1

Istnieje kilka różnych rozwiązań. Oto jeden ze sposobów za pomocą schematu flexbox 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