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

Question

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

我的 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(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;
}

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