Html 在TD内添加控件时，表项垂直对齐发生变化

我一直在想这件事。为什么在td内部放置控件时会影响td的对齐

比如说

<tr>
  <td>Row 1</td>
  <td>
    <input type="text" />
    <input type="button" value="Select" />
  </td>
  <td>Selected Value 1</td>
</tr>
<tr>
  <td>Row 2</td>
  <td colspan="2">
    <input type="text" />
    <input type="button" value="Select" />
    Selected Value 2
  </td>
</tr>

一排
选定值1
第2排
选定值2

“行1”文本与“选定值1”对齐。但是，文本“选定值2”略微向下，未居中，且未与“第2行”对齐

---

我已经尝试过垂直对齐中间或甚至valign，但它不起作用。这在IE和Firefox中都会发生。这在IE中更为明显。我真的不明白。

输入控件的行高与标准文本不同。因此，当您将这些本机内联控件放置在文本旁边时，它们会强制基线/线宽的行为与没有基线/线宽的文本的行为不同。如果将图像放置在文本旁边而不将其浮动，也会发生这种情况（文本将自身与图像底部对齐，直到换行到下一行）

您应该能够通过将输入控件向左浮动，或者可能通过更改文本的

行高度来规避此问题

编辑：这似乎对我很有效。

<table>
    <tr>
        <td>Row 1</td>
        <td>
            <input type="text" />
            <input type="button" value="Select" />
        </td>
        <td>Selected Value 1</td>
    </tr>
    <tr>
        <td style="">Row 2</td>
        <td style="line-height: 120%" colspan="2">  
            <input type="text" />  
            <input type="button" value="Select" />  
            Selected Value 2
        </td>
    </tr>
</table>


一排
选定值1
第2排
选定值2
这是因为第二行中的组件与文本“内联”显示，并且组件的高度大于文本的行高

如果将所有文本的行高更改为更大的值，它们将全部对齐

td  {line-height:500%;}

当我尝试向td中的另一个控件添加垂直对齐的中间控件时，它似乎将所有控件都设置在中间。这在IE中是一种奇怪的行为，但它确实解决了我的问题

<tr>
  <td>Row 1</td>
  <td>
    <input type="text" />
    <input type="button" value="Select" />
  </td>
  <td>Selected Value 1</td>
</tr>
<tr>
  <td>Row 2</td>
  <td colspan="2">
    <input type="text" style="vertical-align: middle;" />
    <input type="button" value="Select" style="vertical-align: middle;" />
    Selected Value 2
  </td>
</tr>


一排
选定值1
第2排
选定值2
等待。关于浮动。我试着做这个，但不起作用。。。有什么提示吗？选定值2。此外，设置行高不会影响文本的对齐方式。当我将文本放置在span标记中时，它甚至不会使其变大。由于无法更改文本字体，因此无法使用此解决方案。