为什么 Button 文本默认垂直居中，而 Div 文本却不是？

了解按钮文本垂直对齐

考虑以下 HTML 标记和 CSS 样式：

<code class="html"><button class="button">Some Text</button>
<div class="button">Some Text</div></code>

<code class="css">.button {
  background: darkgrey;
  height: 40px;
  border: 2px solid grey;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-family: helvetica;
  text-align: center;
  margin-bottom: 20px;
}</code>

应用这些样式时，您注意到 中的文本元素是垂直对齐的，而

中的文本是垂直对齐的。不是。

神秘的魔法

默认情况下， elements 有一个名为 moz-button-content 的内置元素。该元素无法通过 CSS 访问，并且显示块，继承按钮的高度。但是，浏览器的内部代码包含一个硬编码规则，该规则将按钮的内容垂直放置在 moz-button-content 元素的中间。

在 Div 中将文本居中

-webkit-box-align 属性不适用于

中的文本居中因为

elements 没有像 moz-button-content 这样的内置元素。要将

中的文本居中，您可以使用等于 div 高度的 line-height。

结论

中文本的垂直居中； elements 是由 moz-button-content 元素和浏览器的硬编码垂直定位规则的组合引起的。相比之下，将

中的文本居中。元素需要使用行高。