在作为 flex-row 一部分的父 div 中垂直和水平居中两个项目

Question

使用 Bootstrap 4...

假设我在 div 中有以下 flex-row，每个 port-item 中都有一个很棒的字体图标，每个图标下方都有一个小文本实例。我想将字体真棒图标和其父 port-item div 中的文本垂直和水平居中，而我 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 设为弹性列 容器，它将图标和文本垂直堆叠（文本将成为anonymous 弹性项目)，然后将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>

Answer 2

试试这个

添加word-wrap: break-word;

.port-item{
        width: 16.6666667%;
         word-wrap: break-word;
        text-align:center;
        .fa{
            font-size: 2rem;
        }
        
    }
    p{
         
        }
    

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