爲什麼有時垂直居中的高度/線高不起作用？

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應用於按鈕，其內容將是一個彈性項目（本例中爲簡單文本）。