How do I center content next to a floated element and relative to the containing element?

Question

I have markup that looks like this

<div>
  <h1 style="text-align:center;" >Heading 1</h1>
  <img style="float:left;" src="logo.gif"/>
  <h1 style="text-align:center;" >Heading 2</h1>
</div>
<div>
  Content goes here
</div>

The problem is that heading 2 is centered relative to the remainder of space after the image, and not to the whole div, so its not centered on the page.

If I remove the img from the flow with position:absolute, it does not push down the content and instead overlaps it.

Answer 1

One way is to add a right padding to the div with the size of the logo:

<div style="padding-right: 50px;">
  <img style="float:left;" src="logo.gif"/>
  <h1 style="text-align:center;" >Heading</h1>
</div>
<div>
  Content goes here
</div>

Another way is to remove the heading from the flow. This only works on the assumption that the logo height is bigger than the heading height. Beware also that image and heading could overlap.

 <h1 style="position: absolute; width: 100%; text-align:center;">
    Heading
</h1>
<img style="float:left;" src="logo.gif"/>
<div style="clear:both;">
  Content goes here
</div>

Answer 2

Solved it through trial and error. I don't know why but in my testing it only works if width is set between 12 and 80%.

So it seems "h1" is a block element, and text-align does not center block elements, it only centers inline elements inside it, which explains the "centered off-center" behavior. So it turns out the answer is the same answer to the question "how do you center a block element?"

<div>
    <h1 style="text-align:center;">Heading 1</h1>
    <img style="float:left;" src="logo.gif"/>
    <h1 style=" 
             text-align:center;
             margin-left:auto;
             margin-right:auto;
             width:50%;
      ">Heading 2</h1>
</div>
<div style="clear:both;">
  Content goes here
</div>