Question

据我所知，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>

Answer 1

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

button元素在Default style sheet for HTML 4中有display: inline-block，这与浏览器练习相对应。

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

Answer 2

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

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

为什么button元素允许vertical-align：middle？

2 个答案: