为啥按钮元素允许垂直对齐：中间？

Posted 2023-03-05

【中文标题】为啥按钮元素允许垂直对齐：中间？

【英文标题】：Why does the button element allow vertical-align: middle?为什么按钮元素允许垂直对齐：中间？

【发布时间】：2014-07-21 18:14:38

【问题描述】：

据我所知，vertical-align: middle; CSS 属性仅适用于将display 选项设置为table-cell 的元素。

那么为什么vertical-align 被button 元素接受？我错过了什么吗？

我提出问题的原因是我想模仿button 的行为，以避免使用这种结构：

<div style="display: table">
    <div style="display: table-cell; vertical-align: middle;">Vertically aligned</div>
</div>

【参考方案1】：

根据 CSS 2.1 规范，vertical-align property 适用于“inline-level 和 'table-cell' 元素”，inline-level elements“inline-level 元素是源文档中不构成新元素的元素内容块；内容按行分布（例如，段落中强调的文本片段、内嵌图像等）。 'display' 属性的以下值使元素成为内联级别：'inline'、'inline-table' 和 'inline-block'。”

button元素在Default style sheet for html 4中有display: inline-block，这对应于浏览器的做法。

因此，vertical-align 适用于 button 元素。

【讨论】：

那么我为什么应用显示类型 inline-block 的元素，例如：div 标签，不显示这种行为？ jsfiddle.net/cK5cY他们是否必须默认拥有这个值？

@DanielMierzwinski，这是一个不同的问题（你的 jsfiddle 根本没有设置 vertical-align）。

我明白了——我实际上忘了把那条线放进去。对不起！我在这里更新了小提琴：jsfiddle.net/cK5cY/2。这可能是一个不同的问题，但我的意思是我想避免使用所述的标记方式来实现中间对齐的文本。所以这是问题的核心。尽管如此 - 我只是想弄清楚为什么当 span 和 div 标签忽略这一点时，为什么按钮会在垂直轴的中间对齐文本。

【参考方案2】：

在大多数现代浏览器中，vertical-align 也适用于 inline-block 元素，例如 button。请注意，旧版浏览器可能不支持此功能。

我认为您最好使用另一种垂直对齐div 的方法。 vertical-align on inline-block 元素通常仅用于将图标与文本字符串对齐。