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

Here is my code:

这是我的代码:

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

As one can see, the p is neatly vertically centered, as well as the input with line-height: .1em, while the input with line-height: 4em is moved to the top.

可以看出,p整齐地垂直居中,输入线高度:.1em,而行高:4em的输入移动到顶部。

I did not find an explanation for this behaviour after lengthy research.

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

I set up a jsfiddle: https://jsfiddle.net/dlenne/8xapwz11/14/.

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

3 个解决方案

#1

You've set vertical-align: middle on the td, each of which is a parent of an input element.

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

But the vertical-align property is not inherited (source).

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

So, one solution is to apply the rule directly to the inputs:

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

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

An alternative solution simply bypasses the line-height rules by switching the display value of the inputs from inline to 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>

References:

Understanding vertical-align, or "How (Not) To Vertically Center Content"

了解垂直对齐,或“如何(不)垂直居中内容”

10.8.1 Leading and half-leading (W3C definitions for line-height and vertical-align)

10.8.1前导和半前导(行高和垂直对齐的W3C定义)

Line-height inheritance

#2

Since the cell has vertical-align: middle, its contents will be aligned to the middle of the cell.

由于单元格具有vertical-align:middle,因此其内容将与单元格的中间对齐。

But in this case it's not noticeable, because the contents occupy all the cell vertically.

但在这种情况下,它并不明显,因为内容垂直占据所有单元格。

That's because the line-height property sets the minimum height of a line box, and you use a very tall value

这是因为line-height属性设置了线框的最小高度,并且您使用了一个非常高的值

td:nth-child(2) {
  line-height: 4em;
}

Then, the input is an inline-level element. So its vertical alignment with respect to that line box will be given by the vertical-align of the input.

然后,输入是内联级元素。因此,相对于该线框的垂直对齐将由输入的垂直对齐给出。

* {
  vertical-align: top;
}

If you want to align the input at the middle of the cell, you should use vertical-align: middle on the input to align it to the middle of its line box, which is aligned to the middle of the cell.

如果要将输入对齐在单元格的中间,则应在输入上使用vertical-align:middle将其对齐到其行框的中间,该行框与单元格的中间对齐。

input {
  vertical-align: middle;
}

* {
  vertical-align: top;
  margin: 0;
}
td, input {
  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>

#3

I think its because of this :

我认为这是因为:

*{vertical-align: top;}

When you make the line height bigger than the td(parent) it i.e. input(child) scales out and hence follows: vertical-align: top; rather than vertical-align: center;

当你使行高大于td(父)时,即输入(子)缩小,因此如下:vertical-align:top;而不是vertical-align:center;

#1