CSS: центрирование текстового элемента относительно плавающего изображения

Question

Я бы хотел центрировать текстовый элемент (в данном случае подзаголовок h2), игнорируя всплывающее изображение слева.Я бы предпочел, чтобы подзаголовок h2 был выровнен по центру с заголовком h1.Есть ли способ сделать это только с помощью CSS?
Вот пример макета:
http://tinyurl.com/84otx8y
Примечание: ширина и высота образца изображения могут измениться.

Answer 1

Вы хотите игнорировать плавающий элемент?Это возможно, однако, я бы не рекомендовал это, так как это приведет к ужасному результату, если ваш заголовок 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 сверхуизображения.Вы можете предотвратить это, используя position:relative;z-index:4 на вашем плавающем изображении.