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

Question

我一直想知道这个问题。为什么在将控件放入 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 行”文本与“选定值 1”对齐。但是，文本“选定值 2”稍微向下且未居中，且未与“行 2”对齐。

我已经尝试过垂直对齐中间甚至 valign 但它不起作用。 IE 和 Firefox 中都会发生这种情况。在IE中表现得更明显。我真的不明白这一点。

Answer 1

这是因为第二行中的组件与文本“内联”显示，并且组件的高度大于文本的行高。

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

td  {line-height:500%;}

Answer 2

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

您应该能够通过将输入控件向左浮动或更改文本的行高来避免此问题。

编辑：这似乎对我来说效果很好..

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

Answer 3

当我尝试将垂直对齐的中间添加到 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>