divの中央にコンテンツを配置する

Question

divの中央に2番目の列の内容を揃えたいとします。私はいろいろなやり方で試しましたが、これまでどのように見つけられていません。
私はブートストラップ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

は-MDをCOLする垂直方向と水平方向の中心

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を追加取得するには-11 <div class="col-md-11 text-center">