CSS：在按钮中居中显示文本

我想在一个按钮的文本中心，但是，它似乎坐太远了，至少在铬。有什么把戏吗？我试过设置线的高度

go
按钮{
背景：黄色；
高度：23px；
宽度：28px；
填充：0；
保证金：0；
边框：纯黑1px；
线高：23px；
}

使用行距时，需要将其设置为字体大小

---

同时添加垂直对齐：顶部

button {
    background:yellow;
    height:23px;
    width:28px;
    padding:0;
    margin:0;
    border:solid black 1px;
    line-height:13px;
    font-size: 13px;
    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;
}

---

我只需要设置一个较小的

行高度，但实际上我会使用重置css文件来确保这在所有浏览器上都有类似的效果

 line-height: 21px;

因为上述内容在其他浏览器上看起来会有所不同，但会解决Chrome的问题。换言之，这是一个丑陋的解决方案。
我只会设置一个较小的
行高度，但实际上我会使用重置css文件来确保这对所有浏览器都有类似的效果

 line-height: 21px;

因为上述内容在其他浏览器上看起来会有所不同，但会解决Chrome的问题。换句话说，这是一个丑陋的解决方案。
在css类中再添加一个属性。将以下属性添加到类中

text-align: center;

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

text-align: center;

试试这个

不要给出宽度和高度


试试这个

不要给出宽度和高度


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


但是，您可以降低
行高
（例如降低到
11px
），以产生向上移动小写字母的错觉：

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


但是，您可以降低
行高
（例如降低到
11px
），以产生向上移动小写字母的错觉：

如果您的文本是大写的，则将行高设置为元素的高度可以正常工作。行距应该用作设置段落样式的属性，并将其用于div或按钮中的居中元素，您必须针对每个特定情况调整其值

在您的情况下，您可以直观地调整行高，也可以使用padding top和padding bottom调整元素的大小。
如果您的文本是大写的，则将行高设置为元素的高度可以正常工作。行距应该用作设置段落样式的属性，并将其用于div或按钮中的居中元素，您必须针对每个特定情况调整其值

在您的情况下，您可以直观地调整线条高度，也可以使用padding top和padding bottom来调整元素的大小。
我使用了
padding bottom
，效果很好

我使用了
填充底部
，效果很好

这是一个逐案的问题，我个人会删除
高度和
行高度，并设置
顶部和
底部
填充。由于字符“g”在下面占据了更多空间，它看起来也有点倾斜

我倾向于：

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

这是一个更新的，您可以根据需要调整填充。我还添加了另一个按钮，以显示更中心的字符。Y.
这是一个逐案的问题，我个人会删除
高度和
行高度，并设置
顶部和
底部
填充。由于字符“g”在下面占据了更多空间，它看起来也有点倾斜

我倾向于：

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

这是一个更新的，您可以根据需要调整填充。我还添加了另一个按钮，以显示更中心的字符。Y.
太棒了，谢谢。认为它必须等于高度，愚蠢的我。
垂直对齐：顶部
不会改变anything@ExplosionPills它确实改变了一些东西，比如将按钮定位到顶部或底部。这里用例子解释：太棒了，谢谢。认为它必须等于高度，愚蠢的我。
垂直对齐：顶部
不会改变anything@ExplosionPills它确实改变了一些东西，比如将按钮定位到顶部或底部。这里举例说明：这个。对于添加的控件，您可能需要设置
框大小：边框框，因为它删除了交叉行边框+填充大小。对于添加的控件，您可能需要设置
框大小：边框框因为它删除了交叉行边框+填充大小。我也会这样做。不同浏览器之间的线高度不同，我发现在我看来，使用这种方法可以产生最好的跨浏览器结果。我也会这样做。不同浏览器之间的线条高度不同，我发现在我看来，使用这种方法可以产生最好的跨浏览器结果。