Vertically align a floating img and h1 with absolute margin-left - html

Question

I need to align an image and a heading vertically to the middle. Both need an absolute left margin.
For the last 3 hours I have tried to achieve both requirements, but I only get the objects properly aligned OR proper margins. How do I make the image and heading vertically aligned with absolute margins?
This is what I have in mind, but it seems I can only use float OR vertical-align with img.
.top {
line-height: 50px;
}
.top img {
margin-left: 15px;
vertical-align: middle;
float: left;
}
.top h1 {
margin-left: 65px;
vertical-align: middle;
display: inline;
}
-
<div class="top">
<img src="http://www.w3schools.com/images/compatible_chrome.gif" />
<h1>Text aligned vertically with the image + absolute left margin</h1>
</div>
See my JSFiddle experiments.
EDIT:
Here's an image of what I'm trying to achieve. The text has to be right next to the icon (absolute margin, not relative) and the icon + text need to be vertically centered.
The image size is not static which is why I need the text position to be absolute from the left edge.

Answer 1

your corrected code
css
.top {
line-height: 50px;
}
.top img {
margin-left: 15px;
vertical-align: middle;
}
.top h1 {
margin-left: 65px;
vertical-align: middle;
display: inline-block;
}

Answer 2

Use this:
css:
.fragment {
border: 1px blue solid;
margin: 5px;}
.top {
background-color: #ccc;
width: 100%;}
.top img {
margin-left: 15px;
vertical-align: middle;}
.top h1 {
margin-left: 65px;
vertical-align: middle;
display: inline;}
.top2 {
background-color: #ccc;}
.top2 img {
float: left;
margin-left: 15px;
vertical-align: middle;}
.top2 h1 {
margin-left: 65px;
vertical-align: middle;}
HTML
<div class="fragment">
<div class="top2">
<table>
<tr class="top">
<td>
<img src="http://www.w3schools.com/images/compatible_chrome.gif" />
</td>
<td>
<h1>[X] Image and text aligned properly, [ ] 65px absolute margin-left</h1>
</td>
</tr>
<tr class="top2">
<td>
<img src="http://www.w3schools.com/images/compatible_chrome.gif" />
</td>
<td>
<h1>[ ] Image and text aligned properly, [X] 65px absolute margin-left</h1> </td>
</tr>
</table>
</div>
</div>
EXAMPLE: http://jsfiddle.net/76ftL/7/

Answer 3

You can use absolute positioning on the image as follows.
CSS
.fragment {
border: 1px blue solid;
margin: 5px;
}
.top {
background-color: #ccc;
width: 100%;
position: relative;
line-height:50px;
}
.top img {
margin-left: 15px;
position: absolute;
top:50%;
-webkit-transform:translateY(-50%);
}
.top h1 {
vertical-align: middle;
display: inline-block;
margin-left: 65px;;
}
This is the 'magic' part
top:50%;
-webkit-transform:translateY(-50%);
Firstly we put the image halfway down the wrapper BUT translate it back up 50% of it's own height regardless of what that height is.
JSfiddle Demo