小编d_l*_*nen的帖子

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

这是我的代码:

*               { 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被整齐地垂直居中,以及在inputline-height: .1em,而inputline-height: 4em被移动到顶部.

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

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

html css html-table input vertical-alignment

2
推荐指数
1
解决办法
4350
查看次数

标签 统计

css ×1

html ×1

html-table ×1

input ×1

vertical-alignment ×1