テキストは次の行には行かず、前のテキストと同じ行にとどまります

Question

アイコンの後のテキストは、私が試してもアイコンの下にはありません。それだけで、アイコンの右側に滞在している： https://jsfiddle.net/mo5zjm2n/1/

これはHTMLです：

<div class="container-fluid"> 

<br><p class="p-head">GALLERY</p> 
    <hr class="p-div"> 
    <div class="row"> 
     <div class="col-md-3"> 

     </div> 
     <a href="#"><div class="col-md-3 padding-gallery"> 
      <div class="gallery-bg"><i class="fa fa-lightbulb-o"></i><br>   <p>Prom</p></div> 
     </div></a> 
     <a href="#"><div class="col-md-3 padding-gallery"> 
      <div class="gallery-bg"><i class="fa fa-tree" aria-hidden="true"></i><br><p>Great Outdoors</p></div> 
     </div></a> 
     <div class="col-md-3"> 

     </div> 
    </div>  
</div> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3"> 

     </div> 
     <a href="#"><div class="col-md-3 padding-gallery"> 
      <div class="gallery-bg"><i class="fa fa-building-o" aria-  hidden="true"></i><br><p>City Slickers</p></div> 
     </div></a> 
     <a href="#"><div class="col-md-3 padding-gallery"> 
      <div class="gallery-bg"><i class="fa fa-users" aria-hidden="true"> </i><br><p class="gallery-text">Besties Shoots</p></div> 
     </div></a> 
     <div class="col-md-3"> 

     </div> 
    </div>  
</div> 

私は、コンテンツが垂直方向と水平方向中央に配置されながらテキストを直接アイコンの下にセンタリングすることにしたいです。

ありがとうございました！

編集：明瞭

Answer 1

私の場合、私はそれは私の場合で働いていた

を

display:flex; 
justify-content:center; 

を削除し、.gallery-BGする

text-align: center; 

を追加し、.gallery-BG Pから

position:absolute; 

を削除しました。

Answer 2

これを試してください：

HTML：

<a href="#"><div class="col-md-3 padding-gallery"> 
       <div class="gallery-bg"> 
    <div class="icon_container"> 
    <i aria-hidden="true" class="fa fa-tree"></i> 
<p>Great Outdoors</p> 
</div> 
    </div> 
      </div></a> 

CSS：私はそれは私なぜあるので、垂直方向に整列されるように、私もコンテンツを必要とすることを言及するのを忘れてしまった

.icon_container{ 
    margin: 0 auto; 
    text-align: center; 
}