使用 Bootstrap 4 垂直对齐卡片中的元素答案

【问题标题】：Vertical align elements in a card with Bootstrap 4使用 Bootstrap 4 垂直对齐卡片中的元素
【发布时间】：2017-09-22 22:43:35
【问题描述】：

似乎无法弄清楚如何垂直对齐卡片内的标题、段落和链接。我尝试使用垂直对齐实用程序，但它们仅适用于内联元素。

这是我的代码的样子：

.second {
  background: gray;
}
.card-text {
  font-size: 12px;
}
.card-title {
  font-size: 29px;
}
.btn {
  font-size: 12px;
}

<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="col-6">
  <div class="card">
    <div class="card-block">
      Some other text goes here
    </div>
    <div class="card-block">
      <div class="second p-5">
        <img src="https://placehold.it/200x200" class="rounded-circle float-left mr-4" height="200">
          <h4 class="card-title mb-2">John Doe</h4>
          <p class="card-text mb-2">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. </p>
          <a href="#" class="btn btn-primary py-1 px-3">Click Here</a>
      </div>
    </div>
  </div>
</div>

图像应该在左侧，而其余元素在其旁边居中对齐。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

有几种不同的解决方案。这是使用 flexbox utils 的一种方法...

https://www.codeply.com/go/pB8HWQ0HCv

      <div class="col-6">
            <div class="card">
                <div class="card-block">
                    Some other text goes here
                </div>
                <div class="card-block d-flex">
                    <img src="https://placehold.it/200x200" class="rounded-circle mr-4 my-auto" height="200">
                    <div class="second">
                        <h4 class="card-title mb-2">John Doe</h4>
                        <p class="card-text mb-2">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. </p>
                        <a href="#" class="btn btn-primary py-1 px-3">Click Here</a>
                    </div>
                </div>
            </div>
        </div>

Demo

【讨论】：