I have a table like the one in the illustration and I want to find a way to centre text vertically in the first column so that it is always centred relative to the left icon:


The first row is easy when the text takes up only one line - I simply set vertical-align: middle on the <td> and <img>. However, I when the text overflows to the second line it goes down below the image - not what I want. I want it to be centred vertically like in the illustration (I made the second row as it should be in photoshop). How can I do it with CSS? I also tried float: left, but it failed as well. I know I could place the icon and the text into another table but that seems ugly.

Of course, this is a table so the width and height of the first column can be variable depending on how much content there is in other rows and cells so I don't want to set any fixed dimensions. And I'd like it to work in IE8+.