我正在尝试在 inline-block 元素中垂直居中文本（尤其是在 webkit 浏览器中）。<button> 元素开箱即用的功能几乎完全相同。
我尝试过使用 box-align，如这个问题Vertical align text in block element但我不想在元素上设置显式宽度：我希望它适合其内容，即我想要显示：inline-块类型行为。
在 Firefox 中，-moz-box 似乎按照我想要的方式运行，但在 Safari 和 Chrome 中，-webkit-box 使 div 想要水平填充其容器。
[哎呀，因为我是菜鸟，所以无法发布图像]
在这里摆弄各种设置的示例。
在实际的 <button> 元素上查看 webkit 的检查器，它默认为 display: inline-block ，但它遵循 -webkit-box-align ，就好像它被设置为 display: -webkit-box 一样。请参阅我在 <button> 上显式设置 display:inline-block 和 -webkit-box-align: end 以进行演示的小提琴。
似乎通过在混合中添加一个额外的 <div> ，我可以获得我想要的行为，但我真的不想那样做。我也知道显示：垂直居中的表格单元技术；这在这里不合适，因为它有其他副作用。
那么 webkit 的行为是否正确？<button> 元素如何做 <div> 不能做的事情？是否有一些我没有发现的底层 webkit CSS 属性可以使 <div> 表现得像 <button>？或者更好的是，任何跨浏览器的方式来做到这一点？