Absolute positioned element inside of table cell with variable height

Question

There are quite a number of questions here on stackexchange on the absolute positioning inside TD, but I didn't find solution for my specific issue:

I need to implement following layout

This cell is part of tabular data representation in table.

Content of the cell is text data.

Text can be multi-line and has to be vertically and horizontally center aligned. Height of cell may vary as table row height may be stretched by other cells' content, but cell text should always stay vertically aligned (currently it's achieved by vertical-align: middle)

Absolutely positioned element should always reside in the top-right corner of the cell.

I know about technics of placing relative div inside TD and then placing absolute positioned element inside div, but due to variable cell height and requirement of vertical-aligned cell text it seems not an option.

Solution need to be compatible with IE8+, Chrome 21+ and FF 15+

Answer 1

Insert a div around your closebutton:

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

And then position your closebutton:

table td div.wrapper {
    position: relative;
}

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