如何将按钮放在背景图片的中间左侧？

Question

这里是我的按钮：http://jsfiddle.net/cRqhT/120/

HTML：

<a id="button" href="http://example.com"</a> 

CSS：

#button{ 
    display: block; 
    width: 121px; 
    height: 40px; 
    background: url(https://gator1174.hostgator.com/~mskparik/facebook/1.png) no-repeat top; 
} 
#button:hover { 
    background: url(https://gator1174.hostgator.com/~mskparik/facebook/2.png) no-repeat bottom; 
    } 

这里的背景：http://b.dryicons.com/files/graphics_previews/shining_background.jpg

我如何我在后台按钮在中间偏左的？

Answer 1

你从你的锚缺少>：

<a id="button" href="http://mysite.com"></a> 

一个解决办法是把你的锚在容器与背景和绝对位置锚：

<div> 
    <a ... ></a> 
</div> 


.div { position:relative; background:transparent url('myUrl.png') no-repeat; } 
a { position:absolute; top:XXpx; left:0; } 

凡divider与背景图像具有相同的高度和宽度，并且XXpx等于从图像高度减去锚点高度后的值除以2。

JSFiddle example。