为什么有时垂直居中的高度/线高不起作用？

Question

我经常遇到一个使用行高的css单行垂直居中问题。我通常使用这种方法按钮。我只是设置高度和线高，没有填充，例如：

height: 44px; 
line-height: 44px; 

但是有时它并不完美。看到这个小提琴：

https://jsfiddle.net/Lm444sny/1/

我为什么它不工作的原因只是好奇。文字有点集中，但并不完美。

Answer 1

取决于字体本身的行高。 Sone字体有更多的空白，所以它似乎没有对齐。

将按钮行高改为47px或者根本不使用内部标签。例如Chrome将按钮中的文本与显示器对齐，这是现在垂直居中的最佳方式。 看看这个https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 2

它依赖垂直对齐属性。有时当你使用例如图标字体时，符号可以有不同的高度。

最好的结果与垂直居中您可以通过使用flexboxes实现：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

为什么不使用弹性盒呢？您可以将display：flex应用于按钮，其内容将是一个弹性项目（本例中为简单文本）。