如何在 <td> 中垂直对齐 <input> 和 <iframe>？答案

【问题标题】：how to vertically align a <input> and <iframe> inside a <td>?如何在 <td> 中垂直对齐 <input> 和 <iframe>？
【发布时间】：2010-01-20 02:59:38
【问题描述】：

我尝试将 valign="top" 作为 <td> 的属性，但没有成功。

<tr>
<td>
    <span class="validationInline">*</span>
    Security Code:
</td>
<td valign="top">
    <input type="text" />
    <iframe scrolling="no" height="21px" frameborder="0" width="62px" marginheight="0" marginwidth="0" src="http://google.com"></iframe>
</td>
</tr>

似乎<input> 与底部对齐，而<iframe> 与顶部对齐。

【问题讨论】：

我会再清理一下，或者把它改成community wiki，这样我们就可以改进它而无需重新发布。

标签： iframe input valign

【解决方案1】：

从您的描述看来，单元格与顶部对齐，但输入/iframe 在底部彼此对齐。垂直对齐一般只适用于兄弟元素。

您需要在输入和 iframe 上设置 CSS vertical-align:top 属性。

<td valign="top">
  <input style="vertical-align:top" type="text" />
  <iframe style="vertical-align:top" scrolling="no" height="18" frameborder="0" width="62" marginheight="0" marginwidth="0" src="http://google.com"> </iframe>
</td>

【讨论】：

【解决方案2】：

<td valign="top"><input type="text" />
  <iframe scrolling="no" height="18" frameborder="0" width="62" marginheight="0" marginwidth="0" src="http://google.com"> </iframe></td>

以上对我有用...它将内容与单元格的顶部对齐。这就是你所追求的吗？

【讨论】：

您能否发布整个表格或至少整行的 HTML？
和你的sn-p一模一样
不，我在问你桌子的其余部分，或者至少是行的其余部分...重新阅读您的问题，您遇到的确切问题是什么？
我已经把整行都粘贴到这里了。