CSS图像按钮样式

Question

我正在努力完成像

这样的事情

按钮位于页面中间并以50px

分隔

这就是我所做的。

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

Answer 1

这里的简单示例：http://jsfiddle.net/rgmCc/

Answer 2

您的JSFiddle似乎没有加载图片。

将您的.btn包裹在div中。给它一个固定的宽度overflow: hidden;。将其设置为margin: 0 auto;。摆脱<center>标签。将.btn设置为float: left;。

要水平居中，元素必须具有宽度，并且左侧和右侧必须为“自动”。要在div中设置元素网格，通常会浮动它们。