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。这会将您的文字放在正确的位置。