Vertically align a div within a table <th>

Question

I have a table header, <th>, that contains a <div> with text. I want to vertically align the div such that it is aligned to the bottom of the header. I am having serious trouble doing this even though it seems like it should be easy. Any help would be great. Thanks

i.e.

<table>
  <tr>
    <th>
      <div>T<br>E<br>X<br>T</div>
    </th>
    ...
  </tr>
  ...
</table>

As you can see, I am making the header text vertical (by adding break tags). The headers are being pulled dynamically and the lengths (and therefore the heights) vary. But I need them aligned to the bottom rather than the center.

Answer 1

<style>
th{
vertical-align:middle}
</style>

<table>
  <tr>
    <th>
      <span>T<br>E<br>X<br>T</span>
    </th>
    ...
  </tr>
  ...
</table>

This should work.

A div with display:inline might do the trick also. The display:inline is the trick here.