Question

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

这就是我的代码：

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

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

Answer 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

带有Bootstrap 4的卡中的垂直对齐元素

1 个答案: