纵横定心是柔性行的部分家长专区内的两个项目

Question

使用引导4 ...

假设我有以下的柔性排一个di​​v中，有字体真棒图标在每个图标下面的每个port-item和一个小文本实例。我想垂直和水平居中在他们的父母port-item div中的字体真棒图标和文本，我的2小时值得付出的努力和搜索一直是徒劳的。

我想我已经在这个网站上搜索了大约15个主题并且什么也没有得到。我认为我的设置是独一无二的，因为排列顺序。

<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

如果我没有错过的东西在这里，你应该让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>