Question

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

如您所见，p整齐地垂直居中，input与line-height: .1em一致，而input与line-height: 4em一起移动到顶部。

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

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

Answer 1

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

但vertical-align属性未被继承（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

Answer 2

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

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

那是因为line-height属性设置了line box的最小高度，并且你使用了很高的值

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

然后，输入是内联级元素。因此，它与该行框的垂直对齐将由输入的vertical-align给出。

* {
  vertical-align: top;
}

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

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>

Answer 3

我认为是因为：

*{vertical-align: top;}

当你将行高度大于 td （父）时，它input（子）缩小，因此遵循：vertical-align: top;而不是{{1} }

为什么不垂直对齐：中间使用表格单元格中的输入元素？

3 个答案: