1

我想将文本集中在一个按钮中，但是，它似乎坐得太远了，至少在 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;
}
4

8 回答 8

3

使用 line-height 时，需要将其设置为 font-size。

还添加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/

于 2013-07-10T11:11:40.883 回答
2

如果您的文本以大写形式编写，则将 line-height 设置为元素的高度可以正常工作。Line-height 预计将用作设置段落样式的属性，并将其用于 div 或按钮中的居中元素，您必须针对每种特定情况调整其值。

在您的情况下，您可以直观地调整 line-height 或使用 padding-top 和 padding-bottom 来调整元素的大小。

于 2013-07-10T11:32:51.697 回答
1

我用过padding-bottom，效果很好。

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

于 2013-07-10T11:40:29.570 回答
1

这是一个个案问题，我个人会删除heightandline-height和 set topand bottom padding。由于字符“g”在下方占用更多空间，它看起来也略微倾斜。

我的偏好是：

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

这是一个更新的小提琴，您可以根据需要调整填充。我还添加了另一个按钮以显示更多居中的字符。Y。

于 2013-07-10T11:45:58.430 回答
0

我只会设置一个较小的line-height，但实际上我会使用重置 css 文件来确保这将对所有浏览器产生类似的影响。

 line-height: 21px;

由于上述内容在其他浏览器上看起来会有所不同，但会解决 Chrome 的问题。换句话说，它是一个丑陋的解决方案。

于 2013-07-10T11:12:18.387 回答
0

在您的css类中再添加一个属性。将以下属性添加到您的班级

text-align: center;
于 2013-07-10T11:13:08.000 回答
0

尝试这个

不要给出宽度和高度，

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

button{ 
  background:yellow;
  padding:2px;
  margin:0;
  border:solid black 1px;
 }
于 2013-07-10T11:13:27.520 回答
0

它没有居中显示，因为g它只o延伸到基线的一半。

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

但是，您可以减少（例如）line-height以11px产生向上移动小写字母的错觉：

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

于 2013-07-10T11:13:47.557 回答