Центрирование div над изображением/контейнером

Question

Я читал несколько разных статей об этом, но просто не могу обдумать его вокруг по какой-то причине сегодня.

В WordPress у меня будет фактический тег img (в контейнере div), и мне бы хотелось наложить заголовок сообщения и часть текста фрагмента, ориентированного по самому изображению.

Сложная вещь ... Я не буду знать высоту изображения, если я не хочу ограничить длину заголовка пользователя и заголовка сообщения. Использование css для настройки по умолчанию и jQuery для расширенного стиля - это вариант.

Вот фиктивный пример элементов http://cl.ly/image/3X3t2t2g3h22

Fiddle из HTML структуры Я, вероятно, стрелять ... http://jsfiddle.net/4857G/

<div class="featured"> 
    <img src="http://dummyimage.com/800x400" /> 
    <div class="overlay"> 
     <h1>Post Title!</h1> 
     <p>Something else of variable length.</p> 
    </div> 
</div> 

Любые идеи или ссылки оценили. Спасибо :)

Answer 1

HTML

<div id="contain"> 
    <img src="http://placehold.it/200x100"> 
    <div id="over"></div> 
</div> 

и CSS:

#contain { 
    position: relative; 
    width: 200px; 
} 
#over { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background: red; 
    top: 0; 
    left: 50px; 
} 

http://jsfiddle.net/djedjex/q4LTr/1/

Answer 2

Этот CSS центрирует текст по горизонтали, но вы по-прежнему нужен фиксированный верхний или нижний положение.

http://jsfiddle.net/4857G/1/

.overlay{ 
    position: absolute; 
    top: 250px; 
    width: 100%; 
    text-align:center; 
}: