Headline problem when floating around image

I have a problem with headline tags when I float them around an image in compability-mode in explorer.

<img src="1.gif" style="float: left; margin-right: 10px"><h1>Some headline</h1>

The picture is like 100px high, and by default the text centers in middle, which it should, but with compability-mode on it aligns top.

H开发者_运维百科ow can I fix so it vertically aligns center?

/Molgan

Is there a specific need to float the H1 tag next to the image? Another alternative would be to assign the image as a background to the H1 tag, and then use css background-position and padding to position your text and image to display correctly. Can you provide your html markup or a link to the page?

h1 { background: url(/path/to/my_image) 10px 15px no-repeat; padding: 20px; }

That would put your image as the background of the H1, and position it 10px from the left and 15px from the top, for example.

Why float the image? Save yourself some time and put the image in the headline tag, and then you can use vertical align to position it.

JsFiddle solution

Works cross-browser as far as I can check.

It's not "pure CSS", but it is "IE-proof"!

<table>
  <tr>
    <td style="margin-right: 10px">
      <img src="1.gif">
    </td>
    <td valign="middle">
      <h1>Some headline</h1>
    </td>
  </tr>
</table>