CSS如何通过按钮背景正确替换链接

我正在尝试用按钮背景替换应用程序上的链接。但是，链接文本不会水平居中，也不会垂直居中。我正在使用属性“background position:center；”，我认为它可以解决我的问题

我的HTML：

<a class="violetButtonLarge" href="#">My Link</a>

我的形象：

我做错了什么？这就是我得到的：

提前谢谢

a按钮{
a.button {
    background: transparent url('violetButton_large.png') no-repeat scroll top right;
    color: #FFFFFF;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; 
    text-decoration: none;
}
<a class="button" href="#" onclick="this.blur();"> … </a> 

背景：透明url（'violetButton_large.png'）不重复滚动右上角；
颜色：#FFFFFF；
显示：块；
浮动：左；
字体：标准12px arial，无衬线；
高度：24px；
右边距：6px；
右边填充：18px；
文字装饰：无；
}

a.按钮{
背景：透明url（'violetButton_large.png'）不重复滚动右上角；
颜色：#FFFFFF；
显示：块；
浮动：左；
字体：标准12px arial，无衬线；
高度：24px；
右边距：6px；
右边填充：18px；
文字装饰：无；
}

也许你应该设置填充，然后你就不需要设置宽度和高度了。

vertical align:baseline

有助于使用“real”输入按钮将它们设置在同一行上

.button {
  padding: .4em 1.6em .44em 1.6em;
  vertical-align: baseline;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

---

编辑：很抱歉，我没有在您的代码中看到图像，也许您应该看看这个伟大的示例：。

也许您应该设置填充，然后您不需要设置宽度和高度。

vertical align:baseline

有助于使用“real”输入按钮将它们设置在同一行上

.button {
  padding: .4em 1.6em .44em 1.6em;
  vertical-align: baseline;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

---

编辑：很抱歉，我没有在您的代码中看到图像，也许您应该看看这个伟大的示例：。

使用

文本对齐：居中和
行高：41px
在垂直和水平中心对齐文本

.violetButtonLarge {
    display: block; 
    width: 304px; 
    height: 41px;
    background: url(http://i.stack.imgur.com/S8zvb.png) no-repeat center center;
    border:none;
    color: #FFFFFF;
    font-weight: bold;
    font-family: Arial;
    background-color: transparent;
    text-decoration: none;
    text-align:center;
    line-height:41px;
}

示例：
使用
text align:center
和
行高：41px
在垂直和水平中心对齐文本

.violetButtonLarge {
    display: block; 
    width: 304px; 
    height: 41px;
    background: url(http://i.stack.imgur.com/S8zvb.png) no-repeat center center;
    border:none;
    color: #FFFFFF;
    font-weight: bold;
    font-family: Arial;
    background-color: transparent;
    text-decoration: none;
    text-align:center;
    line-height:41px;
}

示例：
你应该把它放在JSFIDLE上，这样我们就可以玩它了。你应该把它放在JSFIDLE上，这样我们就可以玩它了。具有图像高度的行高更好，更通用，它将文本居中，而不取决于字体-size@gryzzly-是的，你是对的，我已经编辑了文本，我没有看到这张图片，我认为它是用纯CSS制作的。线条高度和图片的高度更好，更通用，它将使文本居中，而不取决于字体-size@gryzzly-是的，你是对的，我已经编辑了文本，我没有看到图像，认为它是用纯CSS制作的。没有必要放置
display:block在具有
浮动的元素上
–浮动时，内联元素将变为块状。无需放置
显示：块状在具有浮动的元素上–当浮动时，内联元素将变为块状。