twitter-bootstrap - 在 Bootstrap 4 Alpha 6 中的卡内中心对齐 'list group item'？

Question

有谁知道如何在 Bootstrap 4 Alpha 6 更新中对齐“list-group-item”？我可以将 text-center 添加到卡片本身，集中对齐卡片标题和链接，但是列表组不会移动。

我已经尝试了 mx-auto 类，这会将文本移动到中央，但是边框被缩小到只适合文本，所以看起来不合适

Example of card text center issue .

这是我一直在测试的代码:

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <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>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-block">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Answer 1

使用 align-items-center在卡上..

  <div class="card align-items-center" style="width: 20rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-block text-center">
            <h4 class="card-title">Card title</h4>
            <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>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Vestibulum at eros</li>
        </ul>
        <div class="card-block">
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
        </div>
  </div>

演示 http://www.codeply.com/go/cc1EYpkRSe

编辑根据评论，您必须将每个 <li> 居中对齐像这样..

<ul class="list-group list-group-flush w-100 align-items-stretch">
   <li class="list-group-item text-center d-inline-block">Cras justo odio</li>
   <li class="list-group-item text-center d-inline-block">Dapibus ac facilisis in</li>
   <li class="list-group-item text-center d-inline-block">Vestibulum at eros</li>
</ul>