CSS，垂直对齐表格单元格中的锚点答案

【问题标题】：CSS, vertical-align an anchor in table cellCSS，垂直对齐表格单元格中的锚点
【发布时间】：2013-10-20 08:40:19
【问题描述】：

我需要将表格单元格中的锚标记对齐到顶部，表格单元格包含一个文本区域。我的代码如下，但锚标记与文本区域的底部对齐。

<style>
td {
  border:#777 1px solid; vertical-align:top;
}

textarea {
  height:100px; width:300px;
}
</style>

<table>
  <tr>
    <td>Message:</td>
    <td>
      <textarea></textarea>
      <a href="javascript:" title="Required">*</a>
    </td>
  </tr>
</table>

如何将该锚标记垂直对齐到单元格的顶部？

【问题讨论】：

table 元素和 CSS 还是布局？你会考虑全部使用 CSS 吗？
我已经在 css 中为 'td' 标签添加了 'vertical-align'。如您所见，“消息”一词位于单元格顶部。但在带有文本区域的右侧单元格中，它不是

标签： html css html-table alignment

【解决方案1】：

也给该锚定顶部的垂直对齐：

td a {
    vertical-align: top;
}

【讨论】：

【解决方案2】：

默认情况下，Textarea 用于将近元素向下推到同一行

a {
vertical-align: top;
}

查看JSFiddle

【讨论】：

【解决方案3】：

<table>
<tr>
<td>Message:</td>
<td>
  <textarea></textarea>
 </td>
<td> <a href="javascript:" title="Required">*</a></td>
</tr>
</table>

【讨论】：