對齊div中間的內容

Question

我想將第二列的內容與div中間對齊。 我確實嘗試了很多不同的方法，但到目前為止我還沒有找到。
我正在使用Bootstrap 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例子

謝謝你的幫助 ：）

Answer 1

使用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 2

讓它垂直居中

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

將此css添加到垂直和水平中心

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;
}

和文本中心類到col-md-11 <div class="col-md-11 text-center">