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

Question

Я хочу текст над изображением, которое всегда центрировано. Следующий код достигает этого. Однако у меня есть еще одно требование в том, что я хотел бы, чтобы текст сам по себе был выровнен по левому краю, а не по центру, и я хотел бы указать ширину 100 пикселей для текста, чтобы слова обернули. Как я могу это достичь?

<div id="typewritter-text"> 
    <span id='typewritter'>Lorem Ipsum</span> 
</div> 

#typewritter-text { 
    color: white; 
    position: absolute; 
    left: -65px; 
    position:absolute; 
    text-align:center; 
    top: 400px; 
    width: 100%; 
} 

Answer 1

Я сделал скрипку, чтобы продемонстрировать решение:

http://jsfiddle.net/Ar14/gg076ew0/1/

#typewritter-text { 
    top: 0; 
    left: 0; 
    bottom: 0; 
    margin: auto; 
    width: 100px; 
    height: 100px; 
    position: absolute; 
} 

Это CSS, что вы хотите. Убедитесь, что родительский контейнер имеет относительную позицию относительно него, потому что вы хотите, чтобы он был абсолютно позиционирован относительно родителя, а не всей страницы.

Answer 2

Вы настраиваете text-align:center; в вашем CSS, который устанавливает текст выровнен по центру. Попробуйте изменить это на text-align: left;.

Чтобы установить максимальную ширину текстовой области на 100 пикселей, вероятно, вы должны сделать width: 100px; вместо width:100%;.