如何將按鈕放在背景圖片的中間左側？

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。