html - Text not going to next line, staying on the same line as previous text -
the text after icons not going under icon no matter try; staying on right side of icon: https://jsfiddle.net/mo5zjm2n/1/
this 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>
i want text directly centered under icons while content vertically , horizontally centered.
thanks help!
edit: clarity
in case. i've removed
display:flex; justify-content:center;
and added
text-align: center;
to .gallery-bg , removed
position:absolute;
from .gallery-bg p
it worked in case.
Comments
Post a Comment