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

时间:2016-04-25 05:52:22

标签: html css

无论我尝试什么,图标后面的文字都不会出现在图标下面;它只停留在图标的右侧: 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>

我希望文本直接居中于图标下方,而内容则垂直和水平居中。

感谢您的帮助!

编辑:清晰度

2 个答案:

答案 0 :(得分:0)

在我的情况下。我已删除

display:flex;
justify-content:center;

并添加了

text-align: center;

到.gallery-bg并删除了

position:absolute;

来自.gallery-bg p

它适用于我的情况。

答案 1 :(得分:0)

请试试这个:

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