Question

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

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

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

Answer 1

添加

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

到.list-option

bootply

Bootstrap 4 - 垂直对齐列表项目内容

1 个答案: