垂直居中文本輸入按鈕或帶圖像的按鈕

我無法在輸入按鈕的中心獲取文本。我閱讀了一些建議增加行高的文章，但這沒有幫助。我嘗試過三種不同的方法。垂直居中文本輸入按鈕或帶圖像的按鈕

HTML：

<button type="submit" class="button validate">Submit</button> 
<input type="submit" class="button validate" value="Submit"></input> 
<input type=" button " class="button validate " value="Submit"></input>

CSS：

.button { 
    background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat; 
    cursor: pointer; 
    border: none; 
    display: inline-block; 
    line-height: 29px; 
    vertical-align: middle; 
    text-align: center; 
    width: 110px; 
    height: 29px; 
    color: white; 
    padding: 0; 
    font-size: 14px; 
    margin: 0; 
}

的jsfiddle：http://jsfiddle.net/M7nv6/

編輯：下面 意見認爲文本垂直居中。它看起來並不如此，因爲圖像陰影。我不能改變圖像背景，它是由設計師creted，必須使用它。

添加填充底部幫助。

來源

2013-07-14 renathy

的文本完全集中在所有3個例子。背景圖像是你的問題，它太小了。 – slash197

看我的[DEMO]（http://jsfiddle.net/M7nv6/9/） – 2013-07-14 10:41:59

您可以測試此：

.button { 
    background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat; 
    cursor: pointer; 
    border: none; 
    display: inline-block; 
    line-height: 0px; 
    text-align: center; 
    width: 110px; 
    height: 29px; 
    color: white; 
    padding: 0; 
    padding-bottom: 7px; 
    font-size: 14px; 
    margin: 0; 
}

來源

2013-07-14 10:42:41 Farshid

文字是垂直居中然而你的圖像有陰影，你的按鈕（在圖像中）的高度實際上小於29px。（？25像素）

變線，高度較小，對齊文本頂部

來源

2013-07-14 10:40:29

由於您使用的背景圖像的陰影，你可以添加一個底部填充像這樣：padding: 0 0 5px;（根據您的需要調整）。

也許最好是用css替換完整的圖像。你可以得到幾乎相同的結果，大約相同數量的代碼，節省一些（本例中爲1）http請求。

來源

2013-07-14 10:43:42

由於您使用的是背景圖片，所以您可以使用填充來對齊它。但我不會使用背景圖片，而是使用PUR CSS

DEMO http://jsfiddle.net/M7nv6/

.button { 
    color: rgba(255, 255, 255, 1); 
    text-decoration: none; 
    background-color: rgba(219, 87, 5, 1); 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    -webkit-box-shadow: 0px 9px 25px rgba(0, 0, 0, .7); 
    -moz-box-shadow: 0px 9px 25px rgba(0, 0, 0, .7); 
    box-shadow: 0px 9px 25px rgba(0, 0, 0, .7); 
    display: inline-block; 
    line-height: 29px; 
    vertical-align: middle; 
    text-align: center; 
    width: 110px; 
    height: 29px; 
    color: white; 
    padding: 0; 
    font-size: 14px; 
    margin: 0; 
    border:none; 
}

來源

2013-07-14 10:50:58 Vector

你應該使用的填充，底部爲考慮。但這裏是你不能使用高度或寬度的填充點。每一件事情都沒有高度，沒事！

.button { 
    background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat; 
    cursor: pointer; 
    border: none; 
    display: inline-block; 
    line-height: 29px; 
    vertical-align: middle; 
    text-align: center; 
    width: 110px; 
    color: white; 
    padding: 0 0 8px; 
    font-size: 14px; 
    margin: 0; 
}

來源

2013-07-14 10:53:54 bita

這是個好主意，它拯救了我的生命... –

你也可以移動的背景，因此它適合你的文字：

.button { 
background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat 0px 4px;; 
cursor: pointer; 
border: none; 
display: inline-block; 
line-height: 29px; 
vertical-align: middle; 
text-align: center; 
width: 110px; 
height: 29px; 
color: white; 
padding: 0; 
font-size: 14px; 
margin: 0; 
}

來源

2013-07-14 11:13:55 Marteens

垂直居中文本輸入按鈕或帶圖像的按鈕

回答

相關問題