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个端口项中的每一个占用并且弹性行的宽度相等，这样可以正常工作。字体大小的变化是清理我的响应问题。忽略自定义主题背景类;我自己做了。忽略数据目标和数据切换;那些在代码中进一步崩溃的人会发挥作用，但为了完整起见我将它们包括在内。

问题图片：

如您所见，字体 - 真棒图标和文本都不是水平或垂直对齐的。

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

Answer 1

试试这个

添加word-wrap: break-word;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果我没有错过这里的内容，你应该制作port-item一个flex 列容器，它将图标和文本垂直叠加（文本将成为{{3 }} flex item），然后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>

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

2 个答案: