Центрирование текстового div с абсолютным положением

Question

Мне нужно немного строк текста, которые будут центрированы по горизонтали и вертикали на изображении, я много читал в Интернете, но я не помог мне в решении.

HTML:

<div id="textContainer"> 
    Preparing for important meeting? <br /> 
    <b>Drink some coffeee!</b> <br /> 
    <img src="http://i.imgur.com/me2octq.jpg" /> 
</div> 


<div id="baner"> 
    <div class="imgBaner"></div> 
</div> 

CSS:

.imgBaner { 
    margin: 0 auto; 
    width: 100%; 
    height: 460px; 
    background: url(http://i.imgur.com/5pijCrS.jpg) no-repeat center; 
    position: relative; 
} 


#textContainer { 
    position: absolute; 
    font-size: 32px; 
    text-align: center; 
    z-index: 1; 
    color: yellow; 
} 

Также я прилагаю скрипку: http://jsfiddle.net/vXzKc/

Я ценю каждую помощь!

Answer 1

Для этого я вполне уверен, что вам, по крайней мере, нужно будет знать высоту вашего текстового контейнера. Затем вы можете использовать комбинацию top/margin, чтобы решить эту проблему.

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

Вот мой обходной путь:

HTML:

<div class="imgBaner"> 
    <div id="textContainer"> 
     Preparing for important meeting? <br /> 
     <b>Drink some coffeee!</b> <br /> 
     <img src="http://i.imgur.com/me2octq.jpg" /> 
    </div> 
</div> 

CSS:

.imgBaner { 
    margin: 0 auto; 
    height: 460px; 
    background: url(http://i.imgur.com/5pijCrS.jpg) no-repeat center; 
    display: table-cell; 
    vertical-align: middle; 
} 
#textContainer { 
    font-size: 32px; 
    text-align: center; 
    color: yellow; 
} 

http://jsfiddle.net/vXzKc/1/

Обратите внимание, что отображение: табличная ячейка может не работать в старых браузерах или может привести к поведению. Я тестировал его в новейших браузерах (IE, Firefox и Chrome), и он, похоже, работал во всех них.