使用內聯塊元素上的box-align垂直居中文本

Question

我試圖將文本垂直居中在一個內聯塊元素中（特別是在webkit瀏覽器中）。 幾乎就是<button>元素開箱即用的東西。

我嘗試過使用box-align，就像在這個問題中一樣， 在塊元素中垂直對齊文本，但我不想在元素上設置顯式寬度：我希望它適合其內容，即我想要顯示：inline-塊類型行為。

在Firefox中，-moz-box似乎按照我想要的方式運行，但在Safari和Chrome中，-webkit-box使div想要水平填充其容器。

[oops，不能發布圖片，因為我是菜鳥]

這里有各種設​​置的例子。

在實際的<button>元素上查看webkit的檢查器，它默認顯示：inline-block，但它遵循-webkit-box-align，就好像它被設置為display：-webkit-box一樣。 請參閱我明確設置display的小提琴 ：inline-block和-webkit-box-align：end在<button>上進行演示。

似乎通過在混音中添加一個額外的<div>，我可以得到我想要的行為，但我真的不願意這樣做。 我也知道顯示器：用於垂直居中的table-cell技術; 這不合適，因為它有其他副作用。

webkit的行為是否正確？ <button>元素如何做<div>不能做的事情？ 是否有一些我沒有發現的幕后webkit CSS屬性可以使<div>表現得像<button>？ 甚至更好，任何跨瀏覽器的方式這樣做？

Answer 1

使用css的line-height屬性。 使其等於包含文本的框的高度。

http://www.w3schools.com/cssref/pr_dim_line-height.asp