div 중간에 콘텐츠 정렬

Question

div 중간에 두 번째 열의 내용을 정렬하고 싶습니다. 나는 여러 가지 방법으로 시도했지만 지금까지 어떻게 찾지 못했습니다.
부트 스트랩 4를 사용 중입니다.

어떻게해야할까요?

<div class="card"> 
    <div class="card-body"> 
     <div class="row"> 
     <div class="col-md-1"> 
      <img class="rounded-circle img-thumbnail d-inline" 
       src="..." 
       height="65px" 
       width="65px" 
       alt="User image"> 
     </div> 
     <div class="col-md-11"> 
      <p class="d-inline">...</p> 
      <button class="close" type="button"><span class="fa fa-times" aria-hidden="true"></span></button> 
     </div> 
     </div> 
    </div> 
</div> 

나는 아주 간단한 것을 놓치지 만 무엇을 모르겠다. 당신의 도움에 대한

JSFiddle exemple

감사합니다 :)

Answer 1

가 수직 중심

<div class="col-md-11 align-self-center"> 
    <p class="d-inline">Kitten</p> 
    <button class="close" type="button"><span class="fa fa-times" aria-hidden="true"></span></button> 
</div> 

Answer 2

사용 text-center 클래스입니다.

<div class="card"> 
    <div class="card-body"> 
    <div class="row"> 
     <div class="col-md-1"> 
     <img class="rounded-circle img-thumbnail d-inline" src="https://4fi8v2446i0sw2rpq2a3fg51-wpengine.netdna-ssl.com/wp-content/uploads/2016/06/KittenProgression-Darling-week7.jpg" height="65px" width="65px" alt="User image"> 
     </div> 
     <div class="col-md-11 text-center"><!--Modification here --> 
     <p class="d-inline">Kitten</p> 
     <button class="close" type="button"><span class="fa fa-times" aria-hidden="true"></span></button> 
     </div> 
    </div> 
    </div> 
</div> 

데모 : https://jsfiddle.net/2hjxszck/1/

Answer 3

가 수직 및 수평 중심에

button.close { 
    padding: 0; 
    background: 0 0; 
    border: 0; 
    -webkit-appearance: none; 
    line-height: 65px; 
    text-align: center; 
} 
.d-inline { 
    display: inline!important; 
    line-height: 65px; 
    text-align: center; 
} 

및 텍스트 중심 수업이 CSS를 추가 얻으려면 내지 컬럼-MD -11 <div class="col-md-11 text-center">