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

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>