vertical-align:middle when multiple elements are in the parent

Question

How do I vertically center both the img and the following text inside the td?

<td><a><img width="32" height="32" alt="txt" src="txt.png">Text</a></td>

I've experimented with vertical-align:middle; but haven't been successful.

Answer 1

You need to specify vertical alignment on the elements inside the table cell. In your case:

td a, td img { vertical-align:middle; }

Or see http://jsfiddle.net/ZfP7r/1/.

Answer 2

You can achieve the desired effect by placing the text inside a span tag. Then position this span as required and add a line-height with vertical-align:middle;

This should produce the desired effect - http://jsfiddle.net/tdJ8u/23/