Vertical Align Inside a Table - css

Question

I'm trying to vertial align both image and text inside 1 <td>. I know this can work if I put the image in 1 <td> and the text in another, it's just copied and has about 50 rows. Basic html:
<td>
<img src="img.png" /><strong>Headline!</strong><br />Supporting blurb, not bolded.
</td>
The css is here:
td {
padding: 0.5em 0;
text-align: left;
vertical-align: middle;
}
td img {
float: left;
margin-right: 1em;
max-width: 48px;
vertical-align: middle;
width: 20%;
}
ok, so in the current state the img (which is taller than the text) is vertically aligned, but the text seems to be aligned to the top. If I take out the br and place the lines of text in separate p tags it looks the same. If i take the float off the img both it and the strong text are vertically centered, but after the br it goes to a new line obviously, which is under the image. I want it to have both img and text vertically aligned...but for the text to go to a new line after the strong tag.
I've looked at lot of answers, and nothing works.

Answer 1

This works just fine (You missed <table></table>):
$(document).ready(function() {
var textHeight = $("#text-container").height();
var imgHeight = $("table td img").height();
var padding = (imgHeight - textHeight)/2;
$("#text-container").css('padding-top',padding + 'px');
});
td {
padding: 0.5em 0;
text-align: left;
height: 100px;
background-color: red;
}
td img {
float: left;
vertical-align: middle;
margin-right: 1em;
max-width: 48px;
width: 20%;
height:auto;
}
#text-container {
float:right;
padding-top:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td>
<img src="http://placehold.it/50x100">
<div id="text-container">
<strong>Headline!</strong>
<br />Supporting blurb, not bolded.
</div>
</td>
</table>
Working JSFiddle as well: http://jsfiddle.net/33xyt4ok/
Obviously remove/add the correct height you want, just used 100px to show the vertical-align was working.