Positioning Font Awesome icon and a paragraph - html

Question

I wanna position the icon to be on top of the sentence and both centered within bootstrap column. I tried changing the position and display in css for both the paragraph and icon but it doesnt work.
Right now it looks like this
I want it to be like this
Here's the code
#home-info {
width: 500px;
height: 200px;
background-color: rgba(0,0,0,0.7);
top: 550px;
z-index: 1;
position: absolute;
}
.col-md-3 {
height: 100px;
background-color: #1e2c38;
text-align: center;
color: white;
border-bottom: 1px solid white;
border-top: 1px solid white;
}
.col-md-4 {
height: 300px;
text-align: center;
background-color: #1b2328;
}
.col-md-3 p {
position: relative;
width: 300px;
text-align: center;
}
<div class="container-fluid"> <!-- HOME INFO -->
<div class="row">
<div class="col-md-3" id="navy2">
<div class="content-container">
<i class="fa fa-newspaper-o fa-3x" aria-hidden="true"></i>
<p>Learn more about our recent events and news!</p>
</div>
</div>
<div class="col-md-3" id="navy3">
<div class="content-container">
<i class="fa fa-calendar fa-3x" aria-hidden="true"></i>
<p>Stay up to date! Get the school's calendar here!</p>
</div>
</div>
<div class="col-md-3" id="navy2">
<div class="content-container">
<i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i>
<p>Like and connect with us via Facebook!</p>
</div>
</div>
<div class="col-md-3" id="navy3">
<div class="content-container">
<i class="fa fa-youtube fa-3x" aria-hidden="true"></i>
<p>Learn more about us through our videos!</p>
</div>
</div>
</div> <!-- ROW -->
Thanks!

Answer 1

You can center it by making the inner p a display:block element and use margin: 0 auto to center it...
.col-md-3 p {
position: relative;
width: 300px;
display: block;
margin: 0 auto;
}
http://www.codeply.com/go/kFJwok7k0T
However, because you have the 300px set on the .col-md-3 p, the text will get cut-off at smaller widths. It would be better to not set any specific width on the .col-md-3 p so that it's responsive.

Answer 2

You may use <br> tag to separate the icon and text. And since you are using font-awesome icons, you use text-align: center to center both the icon and the text.