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.