center row content in bootstrap grid - css

Question

I know this question has been asked a lot but each one seems to be a bit unique and I have tried at least 7 different versions here on StackOverflow and none have worked.
It should be a simple fix but I can't center the div contents. I need all the rows centered to the gird and centered when scaled all the way down to the mobile view.
Here is my code example:
http://codepen.io/anon/pen/aOBJEv
Here is the html:
<div class="row-fluid">
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/image-333x333.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">cheese </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/Ed-Vizenor-150x150.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">Cool Beans </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/BeauBird-150x150.png" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">I am happy </div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6"><img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/ave4-150x150.jpg" class="img-btm">
<div class="top"> <img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png"> </div>
<div class="topic text-center">Hello world! </div>
</div>
</div>

Answer 1

I have added the .row-fluid{...} and div.bottom{...} code blocks to your existing CSS.
.row-fluid {
text-align: center;
}
div.bottom {
display: inline-block;
float: none;
text-align: left;
}
.top {
position: absolute;
top: -5px;
left: 0px;
}
.topic {} .bottom {
position: relative;
top: 0px;
left: 0px;
margin-bottom: 25px;
max-width: 275px;
min-width: 277px;
}
.img-btm {
height: 233px;
width: 228px;
-webkit-border-radius: 233px;
-moz-border-radius: 233px;
border-radius: 233px;
}
.bottom .text-center {
max-width: 275px;
min-width: 277px;
position: absolute;
left: -10px;
top: 18px;
font-size: 18px;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row-fluid">
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/image-333x333.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">cheese</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/Ed-Vizenor-150x150.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">Cool Beans</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/BeauBird-150x150.png" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">I am happy</div>
</div>
<div class="bottom col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="http://edvizenor.com/2015/wordpress/wp-content/uploads/2015/05/ave4-150x150.jpg" class="img-btm">
<div class="top">
<img src="http://www.edvizenor.com/2015/images/TopicCircleBlue.png">
</div>
<div class="topic text-center">Hello world!</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
source: Bootstrap 3 responsive centered columns
Source has no explanation for the code, so
The class .row-fluid has a text-align:center property which makes its contents centered.
Under div.bottom I have the display:inline-block property which is necessary for its parents text-align property to work; float:none overrides the default float:left and text-align:left is a fix for center positioning the image inside the column div, because there was some padding to the element.