CSS如何正确地用按钮背景替换链接

Question

我正在尝试用按钮背景替换应用程序上的链接。但是，链接文本不会水平或垂直居中。我正在使用属性“背景位置：中心中心；”我认为这会解决我的问题。

我的 HTML：

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

CSS：

.violetButtonLarge {
    display: block; 
    width: 304px; 
    height: 41px;
    background: url(../images/violetButton_large.png) no-repeat center center;
    border:none;
    color: #FFFFFF;
    font-weight: bold;
    font-family: Arial;
    background-color: transparent;
    text-decoration: none;
}

我的图像：

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

提前致谢！

Answer 1

使用 text-align:center 和 line-height:41px 将文本垂直和水平居中对齐。

.violetButtonLarge {
    display: block; 
    width: 304px; 
    height: 41px;
    background: url(https://i.sstatic.net/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;
}

示例：http://tinkerbin.com/q5VZR1At

Answer 2

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> 

Answer 3

可能你应该设置填充，然后你不需要设置宽度和高度。 vertical-align:baseline 有助于将它们设置在与“真实”输入按钮相同的行上。

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

编辑：抱歉，我没有在您的代码中看到该图像，也许您应该看一下这个很棒的示例： CSS 渐变按钮。