Html 什么使<；按钮>；要将内部文本置于中心位置（垂直和水平方向）？

我试图理解是什么使得

标记在默认情况下将文本定位在元素的正中央。水平对齐由

文本对齐：居中
控制。什么控制垂直对齐

这是一把小提琴：

以下是
的Chrome默认样式表。看不到是什么使它垂直对齐

不幸的是，没有CSS属性定义
文本的垂直对齐方式，根据在浏览器中查看文本的不同，处理方式也不同。大多数解决方案都涉及到
行高
或
填充
修复快速和脏的问题，但最终似乎最好还是使用样式化的
元素等替代方案

关于按钮文本，这篇文章对我很有帮助：

下面是W3C关于垂直对齐属性的规范，它指出它适用于“内联级别和‘表格单元格’元素”：

如果你在寻找浏览器如何决定文本的位置，那么上面的评论是正确的。这取决于浏览器，它将隐藏在代码中，无法操作。
这个问题引起了我的兴趣，所以我开始调查。长话短说，至少在chrome中，
display:-webkit-box应用于按钮元素。我必须安装一个开发者插件才能看到它。我复制并粘贴了样式，并将其应用于一个div。JSfiddle显示了结果

范例

我很确定这是
外观：button
属性的一部分，但我不知道。问得好。我不确定浏览器是否真的会让你知道他们在表单元素中做了什么。多年来，这一直是网页设计师们的一个难题。你的截图价值不大，你应该发布“计算”的内容，这会有很大帮助（但不是截图；-）。@NiettheDarkAbsol Nope，你可以设置
-webkit外观：无并保持垂直对齐。@Sébastien不确定原因。一个好的网页设计师不应该设计表单元素的样式，让用户看到他们可以立即识别为“我在这里输入文本”或“我选中此框”的熟悉元素，而不是用毫无疑问非常好看但对用户来说完全陌生的图形呈现给他们。这不是真的。按钮是可设置样式的元素（即使它们的骨架在阴影DOM中也可用），因此它们的样式取决于用户代理样式表。没那么快！；-）将按钮的默认显示更改为例如
display:inline不会改变任何东西。在您的示例中，禁用
-webkit-box-align
也会更改垂直对齐。
div {
text-align: center;
color: buttontext;
border: 2px outset buttonface;
background-color: buttonface;
font: -webkit-small-control;
-webkit-appearance: button;  
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}