表格单元内的绝对定位元素，高度可变

Question

关于TD内部绝对定位的stackexchange，有很多问题，但我找不到解决方案的具体问题：

我需要实现以下布局

此单元格是表格中表格数据表示的一部分。

单元格的内容是文本数据。

文字可以是多行的，必须垂直和水平居中对齐。 单元格的高度可能会有所不同，因为表格行高可能被其他单元格的内容拉伸，但单元格文本应始终保持垂直对齐（目前它是由vertical-align: middle实现的）

绝对定位的元素应始终位于单元格的右上角。

我知道在TD中放置相对div然后将绝对定位元素放在div中的技术，但是由于可变单元高度和垂直对齐单元格文本的要求，它似乎不是一种选择。

解决方案需要与IE8 +，Chrome 21+和FF 15 +兼容

Answer 1

在你的关闭按钮周围插入一个div：

<table>
    <tr>
       <td>
          <div class="wrapper">
              <div class="close">X</div>
          </div>
          My vertically aligned text.
       </td>
    </tr>
</table>

然后定位你的关键按钮：

table td div.wrapper {
    position: relative;
}

table td div.close {
    position: absolute;
    right: 0;
    top: 0;
}