Vertically center icon between variable-height content and bottom of table cell

Question

I'm displaying an icon in a cell below some text, the exact length/height of which is not known in advance (based on user input, or translations), and want it to be vertically centered between the text and the bottom of the cell.

Getting it aligned to the center of the cell is easy (vertical-align: center, absolute positioning, etc.), but getting it to center below the text, not so much. To visualize what I mean:

The red lines are to find the center of the cell, which is where we can get it. The blue line is the bottom of the text, and where the green lines cross is where we want it to be.

Sample of what I have so far: http://plnkr.co/edit/RIaXLzPtQiqLK9XBcmD0

Things that aren't making this easy:

• Table cells don't have a height, aside from that of its contents, so we can't have a pair of divs, one below the other, with the bottom taking up the remainder.
• The height of the contents of cells next to the one showing the icon can't be determined in advance, so we can't set a height on the cell and expect it to always be true
• The actual contents, therefore length & height, of the "TITLE TEXT" are now known in advance. User-entered content, or translations, can cause this to break across multiple lines
• Have to (reasonably) support IE9+

Is there a way to get the icon vertically centered between the bottom of the text, and the bottom of the table cell, given the lack of knowledge of the size of elements around it?

Answer 1

Using jQuery and some math, this may work for you: jsFiddle (I'm much more used to fiddle than the other site).

jQuery:

$(document).ready(function(){
   //get total height of cell
   var padding = $('.cell').height();
   //subtract height of title text and top 20px
   padding = padding - $('.titleText').height() - 20;
   //split in half for middle
   padding = padding/2;
   $('.iconContainer').css('padding-top', padding + 'px');
});

and the HTML:

<table>
  <tr>
    <td>
      This is a<br />
      tall cell<br />
      to<br />
      make<br />
      the<br />
      other<br />
      tall
    </td>
    <td class="cell">
      <div class="titleText">Title Text</div>
      <div class="iconContainer"><div class="icon">&nbsp;
      </div></div>
    </td>
  </tr>
</table>

and CSS:

table {
  width: 400px;
}

td {
  width: 50%;
  border: thin solid black;
  position: relative;
}

.titleText {
  position: relative;
  top: 20px;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
}
.cell
{
    vertical-align: top;
}
.icon {
  background-image: url( 'http://icons.iconarchive.com/icons/tinylab/android-lollipop-apps/32/Skala-icon.png' );
  width: 32px;
  height: 32px;
  margin: auto;
}

EDIT: Using only Javascript, here is another solution (same principle): http://plnkr.co/edit/i1m1lulL7OgAe0ykY6eX?p=preview