CSS:相对于 float 图像居中文本元素

Question

我想让文本元素(在本例中为 h2 副标题)居中，方法是让它忽略左侧的 float 图像。我更喜欢 h2 副标题与 h1 标题垂直居中对齐。有没有什么办法可以单独使用 CSS 来做到这一点？
这是一个示例布局:
http://tinyurl.com/84otx8y
注意:示例图片的宽度和高度可能会发生变化。

Answer 1

您想忽略 float 元素吗？这是可能的，但是，我不推荐这样做，因为如果您的 h2 标题太宽，这会产生难看的结果:

.wrapper{
    position:relative;
}

.wrapper h2{
    position:absolute;
    left:0;
    right:0;
    margin-top:1.5em
    z-index:2;
}
.wrapper h2 + p{
    margin-top:2.5em;
}

请注意，此解决方案将在图像顶部显示 h2 边框。您可以通过在 float 图像上使用 position:relative;z-index:4 来防止这种情况。