如何将内容放在浮动元素旁边以及相对于包含元素？

Question

我有这样的标记

<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>

问题是标题2相对于图像之后的空间的其余部分居中,而不是整个div,因此它不在页面的中心.

如果我从位置:绝对的流中删除img,它不会下推内容而是重叠它.

Answer 1

通过反复试验解决了这个问题。我不知道为什么，但在我的测试中，只有宽度设置在 12% 到 80% 之间时它才有效。

所以看起来“h1”是一个块元素，而text-align不会将块元素居中，它只会将内联元素居中，这解释了“居中偏离中心”的行为。所以事实证明，答案与“如何使块元素居中？”问题的答案相同。

<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>