CSS Centering of Image - css

Question

I'm working in visual studio with the following code,
however, the URL images refuse to center in the columns like the h2 tags did.
ive tried multiple options such as
background-image: url('http://i59.tinypic.com/314uzyb.jpg');
background-position: center center;
background-repeat: no-repeat;
also
background: url('http://i59.tinypic.com/314uzyb.jpg') center center;
background-repeat: no-repeat;
here is what it currently looks like. As you can see, my h2 tags are centered with the columns. however, the images are still left bound.
here is the full section of code:
<div class="col-md-4">
<h2 style="text-align: center;">Version 1.0</h2>
#*EDIT________________BUTTON1 THAT TAKES USER TO A CREATE PAGE FOR SPECIFIC SONG TYPE(KEY)*#
<style type="text/css">
.urlImg1 {
width: 200px;
height: 200px;
display: block;
background-image: url('http://s28.postimg.org/3jrpa5hvx/BUTTON1_A.jpg');
background-repeat: no-repeat;
}
.urlImg1:hover {
background-image: url('http://s13.postimg.org/brbfy86xz/BUTTON1_B.jpg');
}
</style>
#*END BUTTON#1_____________________________________*#
</div>
<div class="col-md-4">
<h2 style="text-align: center;">Version 2.0</h2>
#*EDIT________________BUTTON2 THAT TAKES USER TO A CREATE PAGE FOR SPECIFIC SONG TYPE(KEY)*#
<style type="text/css">
.urlImg2 {
width: 200px;
height: 200px;
display: block;
background-image: url('http://i59.tinypic.com/314uzyb.jpg');
background-repeat: no-repeat;
}
.urlImg2:hover {
background-image: url('http://i60.tinypic.com/rmp4pv.jpg');
}
</style>
#*END BUTTON#2_____________________________________*#
</div>

Answer 1

It's because you're trying to center the image while the element is as wide as the image. In other words, the image is centered it's just that the element is as wide as the image which makes it appear not centered.
Examples
http://jsfiddle.net/ey0upzw1/
width: 500px; /* Equal to col width */
http://jsfiddle.net/ey0upzw1/1/
width: 200px; /* Not equal to col width */
Solutions
Settings the image to margin: auto.
Adding text-align: center to col-4 instead of only on the h2, you also have to set the image to inline-block instead of block.

Answer 2

You need to center the link.
Since it has a defined width, you can do that with margin:auto.
.urlImg1 {
width: 200px;
height: 200px;
display: block;
background-image: url('http://s28.postimg.org/3jrpa5hvx/BUTTON1_A.jpg');
background-repeat: no-repeat;
margin: auto;
}
.urlImg1:hover {
background-image: url('http://s13.postimg.org/brbfy86xz/BUTTON1_B.jpg');
}
<div class="col-md-4">
<h2 style="text-align: center;">Version 1.0</h2>
</div>