按鈕上的中心文本

我知道這已被問過幾次，但不是解決方案似乎在這種情況下工作。基本上，我希望「play」這個詞在這個按鈕上垂直和水平居中。橫向上，文本自身表現出來，但是垂直方向，無論我嘗試什麼，它都是總是比我應該測試的所有瀏覽器都低一點。有沒有人有什麼建議？由於按鈕上的中心文本

<style type="text/css"> 
button { 
font-family: Verdana, Geneva, sans-serif; 
color: white; 
border-style: none; 
vertical-align: center; 
text-align: center; 
} 

button:hover { 
cursor: pointer; 
} 

button::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
border: 0; 
padding: 0; 
} 


.start { 
background-color: #0C0; 
font-size: 2em; 
padding: 10px; 

} 


</style> 
<button type="button" class="start">play</button>

來源

2011-09-23 Lars

這只是因爲文本是小寫。 http://jsfiddle.net/TYZX4/1/ –

不錯的地方，雖然我剛剛在photoshop上測量過，大寫版本仍然不在正中。也許我太挑剔了...... – Lars

是的，那麼在那個時候，你唯一能做的就是用 'padding：5px 10px 10px 10px;'http://jsfiddle.net/TYZX4/2/ –

.startart上的padding很可能是你必須去玩的，雖然它的設置方式，它應該集中它，但你可以將它分解爲padding: 8px 10px 10px 10px;

你也可以在.start下檢查並設置line-height，看看它是否有幫助。

來源

2011-09-23 20:11:22

看起來默認的對中不夠精確，雖然不夠精美，但這種方法當然可以完成工作。謝謝！ – Lars

正確的價值vertical-align是middle，不center。不過，我不確定這是否會有所作爲，因爲它可能會影響按鈕本身垂直對齊周圍文本的位置。我敢肯定，按鈕文本默認情況下是垂直居中，儘管...

來源

2011-09-23 20:03:21

按鈕上的中心文本

回答

相關問題