为什么不使用vertical-align:middle在表格单元格中使用输入元素？

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,而input与line-height: 4em被移动到顶部.

经过漫长的研究,我没有找到这种行为的解释.

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

Answer 1

你已经设置vertical-align: middle了td,每个都是input元素的父元素.

但该vertical-align属性不是继承的(源).

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

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

参考文献:

• 理解vertical-align,或"如何(不)垂直居中内容"
• 10.8.1领先半领先(W3C定义为line-height和vertical-align)
• 行高继承