Question

我想将文字放在一个按钮中心，然而，它似乎坐得太远，至少在Chrome中。任何招数？我试过设置行高。

<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时，需要将其设置为等于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/

Answer 2

如果您的文字以大写字母显示，设置行高等于元素的高度是正常的。行高应该用作样式段落的属性，并将其用于div或按钮中的元素，你必须为每个特定情况调整它的值。

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

Answer 3

我使用了padding-bottom，但效果很好。

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

Answer 4

这是一个案例问题，我个人会删除height和line-height并设置top和bottom padding。由于角色'g'的性质占据了更多的空间，它看起来也略微偏斜。

我的偏好是：

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

这是一个更新的 fiddle ，您可以调整填充以满足您的需求。我还添加了另一个按钮来显示更多居中的角色。收率

Answer 5

我只想设置一个较小的line-height，但实际上我会使用重置css文件来确保它对所有浏览器都有类似的效果。

 line-height: 21px;

由于上述内容在其他浏览器上会有所不同，但会解决Chrome的问题。用其他词来说这是一个丑陋的解决方案。

Answer 6

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

text-align: center;

Answer 7

试试这个

不要给出宽度和高度，

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

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

Answer 8

它不会显示居中，因为g和o仅延伸到基线的一半。

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

但是，您可以减少 line-height（例如11px），以便给出向下移动低位字母的错觉：

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

CSS：按钮中的中心文本

8 个答案: