Bootstrap column centers with img but not div - html

Question

I'm having an issue with centering within a Bootstrap column. I had a placeholder page using images (a white box with an image and text inside), that I needed to change to a square white div with the image added inside and the text manually added.
When I implemented it the 2nd way, all of a sudden my columns lost there centering.
Here are the codepens for the centered one and the uncentered one.
Uncentered relevant HTML:
<div class="col-xs-4 column-centered">
<a href="../faq/category_3.html">
<div class="img-with-text">
<img src="img/Blue/VideoCollaboration-Blue.png"></img>
<p><b>Video Collaboration</b></p>
</div></a>
</div>
Centered relevant HTML:
<div class="col-xs-4 column-centered">
<div class="img-with-text">
<img src="img/temp_image.png" alt="VideoCollaboration" />
</div></div>
I'd really like to avoid using offsets as that isn't really centering..

Answer 1

try
.img-with-text{
display: inline-block;
}
or
.img-with-text{
margin: 0 auto;
}

Answer 2

That's because anchor tags are inline-block by nature, you will have to change it to block and do the following.
<div class="col-xs-4 column-centered">
<a href="../faq/category_3.html" class="block text-center">
<div class="img-with-text inline-block">
<img src="img/Blue/VideoCollaboration-Blue.png"></img>
<p><b>Video Collaboration</b></p>
</div>
</a>
</div>
.inline-block{
display: inline-block;
}
.block{
display: block;
}