html - Bootstrap 4 - 对齐列表中的文本

Question

我刚开始使用 bootstrap 4，但无法将列表组中的文本居中。

在 boostrap 3 中，以下内容完美运行:

.list-con {
  text-align:center;
}             

但是在 boostrap 4 中。文本对齐仅适用于多行文本。

li {
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-con">
  <ul class="list-group test">
    <li class="list-group-item test-item">
      Title
    </li>
    <li class="list-group-item test-item">
      Title2
    </li>
    <li class="list-group-item test-item">
      Morbi id neque a eros mattis tristique at a dolor. Quisque sapien tortor, suscipit ut varius id, dictum eget tortor. Sed elit diam, tincidunt sed fringilla a, dignissim in augue. Curabitur elementum ante eget erat eleifend, a blandit odio accumsan. Nullam
      mattis urna nec elit dapibus, vel suscipit nulla dictum. Etiam erat magna, dictum eget pharetra et
    </li>
  </ul>
</div>

Answer 1

您可以使用 justify-content: center; 在列表组中实现居中文本, 哪个

... defines how the browser distributes space between and around content items along the main axis of their container

See MDN获取更多信息。

li {
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-con">
  <ul class="list-group test">
    <li class="list-group-item test-item">
      Title
    </li>
    <li class="list-group-item test-item">
      Title2
    </li>
    <li class="list-group-item test-item">
      Morbi id neque a eros mattis tristique at a dolor. Quisque sapien tortor, suscipit ut varius id, dictum eget tortor. Sed elit diam, tincidunt sed fringilla a, dignissim in augue. Curabitur elementum ante eget erat eleifend, a blandit odio accumsan. Nullam
      mattis urna nec elit dapibus, vel suscipit nulla dictum. Etiam erat magna, dictum eget pharetra et
    </li>
  </ul>
</div>