在图像上将左对齐的文本居中

Question

I want text over an image that's always centered. The following code achieves that. However, I have a further requirement in that I'd like the text itself to be left-aligned, as opposed to centered, and I'd like to specify a width of 100px for the text so that the words wrap. How can I achieve this?

<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

You are setting text-align:center; in your CSS, which sets the text to center-aligned. Try changing this to text-align: left; .

To set the maximum width of the text area to 100 pixels, you should probably be doing width: 100px; instead of width:100%; .

Answer 2

I made a fiddle to demonstrate the solution:

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

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

This is the CSS that you want. Make sure the parent container has position relative on it as well because you want it to be absolutely positioned relative to the parent not the whole page.