Css 引导程序4-垂直对齐列表项内容

我有一个应用程序，使用引导4。在这个应用程序中，我有一个内联列表。我需要将每个列表项的内容垂直居中。此时，每个项目的内容垂直居中于顶部，如图所示。相关代码如下所示：

<ul class="list-inline" style="text-align: center;">
  <li class="list-inline-item">
    <div class="list-option">Football</div>
  </li>
  <li class="list-inline-item">
    <div class="list-option">Baseball</div>
  </li>
  <li class="list-inline-item">
    <div class="list-option">Basketball</div>
  </li>
  <li class="list-inline-item">
    <div class="list-option">Golf</div>
  </li>
  <li class="list-inline-item">
    <div class="list-option">Hockey</div>
  </li>
</ul>

足球


棒球


篮球


高尔夫球


曲棍球

我发布了一个类似的问题。然而，在这个问题上，我不够具体。不过，回答者确实回答了这个问题。出于这个原因，我想确保他们得到了信任，并提出了一个新问题。这个问题实际上是关于在每个项目中垂直居中内容。如何在Bootstrap 4中执行此操作？

添加

display: flex;
justify-content: center;
align-items: center;

到

。列出选项

---

为什么不提供一个

顶部边距

？将此添加到

列表选项中

类以使其居中：

填充顶部：1.4rem