I’m trying to accomplish something like this Where the buttons are centered in the

Question

0

Editorial Team

Asked: May 25, 20262026-05-25T23:16:35+00:00 2026-05-25T23:16:35+00:00

I’m trying to accomplish something like this Where the buttons are centered in the

0

I’m trying to accomplish something like this enter image description here

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></div>
   <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