부트 스트랩의 정렬 4

Question

부트 스트랩 4에 일부 내용을 정렬하려고합니다. 생각했던대로 작동하지 않으며 이유를 이해할 수 없습니다. 특히 열의 콘텐츠를 세로 또는 가로로 정렬 할 수 없습니다. 예를 들어,이 Bootply에, 나는 다음과 같은 한 :이 중심이야 있도록

<div class="container"> 
<div class="row"> 
    <div class="col-8"> 
    <h2 class="display-4">Some Text</h2> 
    <p class="lead"> 
     Some other details go here. This portion can go up to three lines of text. It will wrap around to the next line. A YouTube video will be available in the right side. 
     It's not there because Bootply doesn't allow iframes. 
    </p> 
    </div> 

    <div class="col-4"> 
    <div style="border:solid 2px #ddd;"> 
     A vertically centered YouTube video. 
    </div> 
    </div> 
</div> 


<div class="row"> 
    <div class="col-4"> 
    <div class="card"> 
     <div class="card-block"> 
     <div class="row"> 
      <div class="col-3"> 
      <div class="fa fa-arrow-right" style="font-size:3.0rem;"></div>          
      </div> 

      <div class="col-9"> 
      <h3 class="card-title">Detail</h3> 
      <p class="card-text">Here's some more info for you. This could go up to three lines of text. How do I center the arrow?</p>            
      </div> 
     </div> 
     </div> 
    </div>   
    </div> 
</div> 
</div> 

어떻게 수직으로 YouTube 동영상을 정렬합니까? 화살표가 중앙에 오도록 세로로 정렬하려면 어떻게합니까? 화살표를 수평 중심으로 배치 할 수없는 것 같습니다. 나는 here을 언급 한대로 justify-content-center을 사용해 보았습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

당신은 왜 화살표가 수평 불구하고 중앙에 있지의 중첩 인 flexbox

.col-3 { 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    } 

Bootply