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>