CSS：在按鈕

Question

中心的文字，我想然而，中心將在一個按鈕上的文字，似乎坐得遠了，至少在Chrome中。任何技巧？我試過設置行高。

http://jsfiddle.net/BCKYp/

<button>go</button> 

button{ 
    background:yellow; 
    height:23px; 
    width:28px; 
    padding:0; 
    margin:0; 
    border:solid black 1px; 
    line-height:23px; 
} 

Answer 1

使用的line-height，則需要將其設置爲字體大小。

另外補充vertical-align: top

button { 
    background:yellow; 
    height:23px; 
    width:28px; 
    padding:0; 
    margin:0; 
    border:solid black 1px; 
    line-height:13px; 
    font-size: 13px; 
    vertical-align: top; 
} 

http://jsfiddle.net/BCKYp/8/

Answer 2

我只想設置一個小line-height，但真的我會用一個重置的CSS文件，以確保這將會對所有瀏覽器類似的效果。

line-height: 21px; 

由於上述在其他瀏覽器上看起來不同，但會解決Chrome的問題。這是一個醜陋的解決方案。

Answer 3

在您的css類中再添加一個屬性。以下屬性添加到您的類

text-align: center; 

Answer 4

試試這個

不給的寬度和高度，

http://jsfiddle.net/BCKYp/12/

button{ 
    background:yellow; 
    padding:2px; 
    margin:0; 
    border:solid black 1px; 
} 

Answer 5

它不會出現爲中心，因爲g和o只延伸到基線的一半。

http://jsfiddle.net/ExplosionPIlls/BCKYp/1/

但是，可以減少的line-height（到11px例如），得到向上移動小寫字母的錯覺：

http://jsfiddle.net/ExplosionPIlls/BCKYp/4/

Answer 6

設置行高等於元素的高度正常工作，如果你的文字寫成大寫。行高預計將用作樣式段落的屬性，並將它用於將元素居中放置在div或按鈕中，您必須調整它的每個特定案例的值。

在你的情況下，你可以直觀地調整行高或使用padding-top和padding-bottom來確定元素的大小。

Answer 7

我用padding-bottom並能正常工作。

http://jsfiddle.net/BCKYp/22/

Answer 8

這是問題的情況下的情況下，我個人會刪除height和line-height並設置top和bottompadding。由於字符'g'的性質在下面佔用更多空間，所以它看起來也略微偏斜。

我更傾向於將：

button{ 
    background:yellow; 
    width:28px; 
    padding:5px 0; 
    margin:0; 
    border:solid black 1px; 
} 

這裏有一個更新的fiddle，可以調整填充，以滿足您的需求。我還添加了另一個按鈕，以顯示更多居中字符。 Y.