html - 在属于 flex-row 的父 div 中垂直和水平居中两个元素

Question

使用 Bootstrap 4...

假设我在 div 中有以下 flex-row，每个 port-item 中都有一个超棒的字体图标，每个图标下方都有一个小文本实例。我想在它们的父级 port-item div 中垂直和水平居中 font-awesome 图标和文本，我 2 个多小时的努力和搜索都是徒劳的。

我想我已经在这个网站上搜索了大约 15 个主题，但一无所获。由于 flex-row，我认为我的设置是独一无二的。

<div>
  <div class="d-flex flex-row text-white">
    <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#thing1">
      <i class="fa fa-home d-block"></i>
      Thing 1
    </div>
    <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#thing2">
      <i class="fa fa-graduation-cap d-block"></i>
      Thing 2
    </div>
    <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#thing3">
      <i class="fa fa-folder-open d-block"></i> 
      Thing 3
    </div>
    <div class="port-item p-4 bg-twilight" data-toggle="collapse" data-target="#thing4">
      <i class="fa fa-pencil d-block"></i>
      Thing 4
    </div>
    <div class="port-item p-4 bg-citrus" data-toggle="collapse" data-target="#thing5">
      <i class="fa fa-bolt d-block"></i>
      Thing 5
    </div>
    <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#thing6">
      <i class="fa fa-envelope d-block"></i>
      Thing 6
    </div>
  </div>
</div>

这是作用于该区域的 CSS:

.port-item{
        width: 16.6666667%;
        .fa{
            font-size: 2rem;
        }
    }

16.66667% 是为了确保 6 个端口元素中的每一个都占用 flex 行的相同宽度，这工作正常。更改字体大小是为了解决我遇到的响应问题。忽略自定义主题背景类；我自己做的。也忽略数据目标和数据切换；这些会在代码中进一步崩溃，但为了完整起见，我将它们包括在内。

问题图片:

如您所见，字体精美的图标和文本都没有水平或垂直对齐。

编辑:在 ZNaneswar 的编辑答案之后，使用我的实际栏:

Answer 1

如果我没漏掉什么，你应该把 port-item 做成一个 flex column 容器，它会垂直堆叠图标和文本(文本会成为 anonymous flex 元素)，然后 align-items/justify-content 将它们水平/垂直居中。

.port-item {
  width: 16.6666667%;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div>
  <div class="d-flex flex-row text-white">
    <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#thing1">
      <i class="fa fa-home d-block"></i> Home
    </div>
    <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#thing2">
      <i class="fa fa-graduation-cap d-block"></i> CV
    </div>
    <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#thing3">
      <i class="fa fa-folder-open d-block"></i> Research
    </div>
    <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#thing4">
      <i class="fa fa-pencil d-block"></i> Teaching
    </div>
    <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#thing5">
      <i class="fa fa-bolt d-block"></i> Lifting
    </div>
    <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#thing6">
      <i class="fa fa-envelope d-block"></i> Contact
    </div>
  </div>
</div>