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;

并添加了

text-align: center;

到.gallery-bg并删除了

position:absolute;

来自.gallery-bg p

它适用于我的情况。

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

文本不会转到下一行，与前一个文本保持同一行

2 个答案: