Bootstrap 4：仅使用实用程序的垂直中心徽章

Question

我正在制作一个Bootstrap 4卡，其标题中需要有图像，标题，副标题，徽章和关闭按钮。徽章需要在右侧垂直居中，而图像，标题和副标题需要在左侧垂直居中。

这是一张图片，它会更好地解释一下：

我无法获得标题和副标题，也无法获得垂直居中的徽章。我必须只使用Bootstrap实用程序来执行此操作，因此如果可能的话，不需要额外的CSS（如果没有其他选择，则很少）。我怎样才能做到这一点？

这是我的代码：

＆＃13;

＆＃13;

.close {
  font-size: 20px;
  text-shadow: none;
  color: #000;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
}

.card-title {
  font-size: 18px;
}

.card-subtitle {
  font-size: 11px;
}

＆＃13;

<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="card">
  <button type="button" class="close close-chat mr-1" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  <div class="card-header border-0 py-3">
    <img src="http://placehold.it/45x45" class="rounded-circle float-left mr-3">
    <h4 class="card-title mb-0 d-inline align-middle">Card title</h4>
    <span class="badge badge-success float-right px-4 py-1 mt-2">Success</span>
    <h6 class="card-subtitle text-muted">Card subtitle</h6>
  </div>
  <div class="card-block">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;