html - 为什么不垂直对齐 : middle work with input elements in a table-cell?

Question

这是我的代码:

*               { 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; }

<table>
    <tr>
      <td>
        <p>
          Some vertically centered text.
        </p>
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
</table>

可以看到，p 和 input 的 line-height: .1em 完全垂直居中，而line-height: 4em 的 input 被移动到顶部。

经过长时间的研究，我没有找到对这种行为的解释。

我设置了一个 jsfiddle:https://jsfiddle.net/dlenne/8xapwz11/14/ .

Answer 1

您已设置 vertical-align: middle在 td 上, 每个都是 input 的父级元素。

但是 vertical-align属性(property)不被继承(source)。

因此，一种解决方案是将规则直接应用于输入:

*               { 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: .1em; }
p, input        { outline: 1px solid green; }
input           { vertical-align: middle; }               /* new */

<table>
  <tr>
    <td>
      <p>Some vertically centered text.</p>
    </td>
    <td>
      <input type="text">
    </td>
    <td>
      <input type="text">
    </td>
  </tr>
</table>

另一种解决方案只是绕过 line-height通过切换 display 规则来自 inline 的输入值至 block .

*               { 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: .1em; }
p, input        { outline: 1px solid green; }
input           { display: block; }               /* new */

<table>
  <tr>
    <td>
      <p>Some vertically centered text.</p>
    </td>
    <td>
      <input type="text">
    </td>
    <td>
      <input type="text">
    </td>
  </tr>
</table>

引用资料:

• Understanding vertical-align , or "How (Not) To Vertically Center Content"
• 10.8.1 Leading and half-leading (line-height 和 vertical-align 的 W3C 定义)
• Line-height inheritance