CSS Image button styling

I'm trying to accomplish something like this

Where the buttons are centered in the middle of the page and separated by 50px

Here is what I did.

HTML

   <div class="btn btn_tours"><a href="maps.html">Maps</a><span></span></di开发者_StackOverflow中文版v>
   <div class="btn btn_maps"><a href="dbtest.html">DB Test</a><span></span></div>
   <div class="btn btn_locations"><a href="geolocation.html">Geolocation</a><span></span></div>
   <div class="btn btn_directions"><a href="accel.html">Accelerometer</a><span></span></div>

CSS

.btn { 
    position: relative;
    padding: 10px 10px 10px 10px;
    cursor: pointer;
    overflow: visible; 
    width:50px;
    height: 50px;
}
.btn_directions{ background: url(http://tinyurl.com/5r6a3jy); no-repeat;}
.btn_maps{ background: url(http://tinyurl.com/5r6a3jy); no-repeat; }
.btn_tours{ background: url(http://tinyurl.com/5r6a3jy); no-repeat;}
.btn_locations{ background: url(http://tinyurl.com/5r6a3jy); no-repeat; }

JSFIDDLE

Simple example here: http://jsfiddle.net/rgmCc/

Your JSFiddle doesn't seem to be loading images.

Wrap your .btn in a div. Give it a fixed width and overflow: hidden;. Set it to margin: 0 auto;. Get rid of the <center> tags. Set your .btn to float: left;.

To horizontally center, an element must have a width and 'auto' on the left and right sides. To set up a grid of elements inside of a div, you'll usually float them.