这是我的代码:
* { vertical-align: top; margin: 0; }
td { vertical-align: middle; border: 1px solid red; }
td:nth-child(1) { line-height: 3em; }
td:nth-child(2) { line-height: 4em; }
td:nth-child(3) { line-height: 0.1em; }
p, input { outline: 1px solid green; }Run Code Online (Sandbox Code Playgroud)
<table>
<tr>
<td>
<p>
Some vertically centered text.
</p>
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</table>Run Code Online (Sandbox Code Playgroud)
如可以看到的,p被整齐地垂直居中,以及在input与line-height: .1em,而input与line-height: 4em被移动到顶部.
经过漫长的研究,我没有找到这种行为的解释.
我设置了一个jsfiddle:https://jsfiddle.net/dlenne/8xapwz11/14/ .