CSS图像按钮不对

Question

转到本文标签：

<a href="javascript:{}" onclick="document.getElementById('_paypal').submit(); return false;"><span id="order_now_btn">Order Now</span></a>

这里的CSS：

#order_now_btn { 
    background: transparent url("../images/order_now_btn.gif") 0 0px no-repeat; 
    height: 33px; 
    width: 111px; 
    display: block; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:12px; 
    font-weight: bold; 
    cursor:pointer; 
    color: #fff; 
} 

问题是，我不能让文本以适应在正确的地方.. 。

这里的按钮图像：

有没有更好的方法来做到这一点？我有很多这样的事情要做。

Answer 1

我决定去按钮标签，这很好。

<button type="submit" id="order_now_btn" width="111" height="33" align="absmiddle" alt="Order Now" /><span>Order Now</span></button>

#order_now_btn { 
    color: #fff; 
    background: transparent url("../images/order_now_btn.gif") 0 0px no-repeat; 
    border: 0; 
    height: 33px; 
    width: 111px; 
    font-size:12px; 
    font-weight: bold; 
    cursor:pointer; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
} 

#order_now_btn span { 
    position: relative; 
    left: 12px; 
} 

Answer 2

只需要添加一些填充：

padding:10px 0 0 30px; 

http://jsfiddle.net/6fX5v/

Answer 3

你必须像上面的文本的位置。

检查这些

http://www.the-art-of-web.com/css/textoverimage/

http://frinity.blogspot.com/2008/06/placing-text-over-image-using-css.html

Answer 4

只需添加padding-left:30px;和padding-top:10px;在#order_now_btn。这将使在正确的位置文本。