CSS如何正確替換按鈕背景的鏈接

我試圖用按鈕背景替換我的應用程序上的鏈接。但是，鏈接文本不會在水平方向居中居中。我正在使用屬性「background-position：center center;」我認爲這將解決我的問題。CSS如何正確替換按鈕背景的鏈接

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

我的形象：

enter image description here

什麼我我做錯了什麼？這就是我得到：

enter image description here

提前感謝！

來源

2011-11-22 Rui

你應該把它扔上的jsfiddle，這樣我們就可以用它玩。 –

使用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

來源

2011-11-22 17:02:56 motoxer4533

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>

來源

2011-11-22 16:59:33 Vinit

沒有必要在具有'float'的元素上放置'display：block;' - 內聯元素在浮動時會變得塊狀。 –

也許你應該設置填充，那麼你不需要設置寬度和高度。 vertical-align: baseline有助於將它們與「真實」輸入按鈕設置在同一行上。

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

編輯：對不起，我沒有在你的代碼看到的形象，也許你應該得到這個很好的例子一瞥：CSS Gradient Buttons。

來源

2011-11-22 17:01:48 martinstoeckli

行高與圖像的高度更好，更通用，它將中心文本不取決於字體大小 –

@gryzzly - 是的，你是對的，我已經編輯了文本，我沒有看到圖像和以爲它是用純CSS製作的。 – martinstoeckli

CSS如何正確替換按鈕背景的鏈接

回答

相關問題