Question

我正在尝试将卡片在页面上居中放置，但它并没有垂直居中放置

我已经尝试过每一个想法，否则没有可行的解决方案

<div class="card" style="width: 18rem">
  <img class="card-img-left" src="" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Yousif Alnajjar</h5>
    <ul class="list-group list-group-flush">
    <li class="list-group-item"><a href="#" class="card-link">Portfolio</a></li>
    <li class="list-group-item"><a href="#" class="card-link">Letter of Application</a></li>
    <li class="list-group-item"><a href="#" class="card-link">CV</a></li>
  </ul>
  </div>
</div>

这是codepen：https://codepen.io/anon/pen/vwoJMo

Answer 1

您可以对 flex-box使用bootstrap 4实用程序类，以将项目水平和垂直居中放置。

在卡片周围创建一个div包装器，并添加弹性框实用程序类d-flex justify-content-center align-items-center

d-flex用于将容器设置为display: flex。
align-items-center用于使项目垂直居中。
justify-content-center用于使项目水平居中。

设置包装器div的高度，以便我们可以将其垂直居中，出于演示目的，我将其设置为min-height: 100vh;

.vh-100 {
  min-height: 100vh;
}

<div class="d-flex justify-content-center align-items-center vh-100">
<div class="card" style="width: 18rem">
  <img style="float:left" src="" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Yousif Alnajjar</h5>
    <ul class="list-group list-group-flush">
    <li class="list-group-item"><a href="#" class="card-link">Portfolio</a></li>
    <li class="list-group-item"><a href="#" class="card-link">Letter of Application</a></li>
    <li class="list-group-item"><a href="#" class="card-link">CV</a></li>
  </ul>
  </div>
  </div>
</div>

Working Codepen Example

如何使用Bootstrap在页面的垂直和水平方向上居中放置卡片元素？

1 个答案: