为什么这个按钮的文本居中？ [复制]答案

【问题标题】：Why is this button’s text centered? [duplicate]为什么这个按钮的文本居中？ [复制]
【发布时间】：2019-01-01 16:28:09
【问题描述】：

为什么基本<button> 元素的文本内容垂直居中？在检查器中查看按钮的样式后，我无法确定是哪个 CSS 属性对此负责。

button {
  width: 200px;
  height: 100px;
  text-align: left;
}

&lt;button&gt;lorem ipsum&lt;/button&gt;

【问题讨论】：

填充会影响按钮中文本的位置。
在 Chrome Inspector 中，查找“用户代理样式表”应用程序。我相信 FF 也会显示默认的 UA 样式表.. 会想在“简单”HTML 上尝试它：} 然后应该可以使用元素样式表来查看负责的基本值。
@user2864740 -webkit-appearance: none; 似乎不影响垂直对齐。
@Danield 我同意这一点，但奇怪的是我们无法使用 line-height 或 flexbox 轻松更改对齐方式。只有填充似乎有效......我认为我们应该将其添加为“如何垂直对齐文本”的有力答案：p
我发现这个问题stackoverflow.com/questions/15764600/… 可能会有所帮助

标签： css

【解决方案1】：

我想了很多关于这种行为但找不到正确答案，只是一个技巧

    button {
      width: 200px;
      height: 100px;
      text-align: left;
      position:relative;
    }
    
    button span {
      position:absolute;
      bottom:0;
      width:100%;
      text-align:center;
    }

&lt;button &gt;&lt;span&gt;Example&lt;/span&gt;&lt;/button&gt;

【讨论】：

诀窍真的很好，但是为什么文本自动垂直对齐到中间仍然没有答案。

【解决方案2】：

浏览器经过硬编码，按钮内容垂直居中，您无法在大多数浏览器（如 Chrome）中进行修改。有关更多信息，请参阅此答案：https://stackoverflow.com/a/34612505/5623003

【讨论】：