Center some text, but vertical align each line's first letter?

I want to center some text, but vertical align each line's first letter.

[Jocke]

I want to left-align some text, but still place it horizontally in the center of the screen. How do I do this without using a <td>?

It's easier to explain my question showing what I want to achieve and what I have tried: [snip]

Hope you can help.

Joakim

[edited by: heini at 5:40 pm (utc) on July 11, 2003]
[edit reason] sorry - please don't use urls [/edit]

[DrDoc]

Welcome to Webmaster World! :)

Please review the Terms of Service [webmasterworld.com] and what it says about posting URLs.

Now, the only thing that really works (cross-browser) is playing with absolute positioning and negative margins. To acheive the effect you need to know the object's height.

#myobject {
height: 300px;
left: 0;
position: absolute;
top: 50%;
margin-top: -150px;
}

The negative margin (in bold) is the key.

Enjoy! :)

[BlobFisk]

Welcome to WebmasterWorld, Jocke!

Posting links to personal sites is against the TOS [webmasterworld.com] here at WebmasterWorld. You should really edit your post to remove it before a mod/admin does!

To center text, use text-align:center. The vertical-align was discussed here [webmasterworld.com]. Although there are browser support difficulties.

<added>DrDoc's negative margin example is the currently accepted best workaround!</added>

[Jocke]

Hi, Sorry for the link, didn't know about that. I'm trying to edit my post, but even though I'm logged in there is no "owner edit" button as there should be according to: [webmasterworld.com...]
Could you please tell me how to edit my post?

Back to my question:

What I want to do is not to vertically align an element. We can take two lines of text inside a div as an example: The first line is half the width of the second line, but we don't know the width of any of those lines. Then we left-align this text using 'text-align' in the div. Finally I want to move this 'block' of text into the center of the screen, but the lines position relative to each other shouldn't change, so then I can't set the 'text-align' property to 'center', because that would make so that the first letter of the second line isn't positioned just below the first letter of the first line.

This behaviour WOULD work if I explicitly set a width for the div, and the set 'margin-left' and 'margin-right' to 'auto', but how do I do this without explicitly setting any width/padding/margin? (auto values are ok)

Jocke

[TheDoctor]

Jocke, what, in your example, is it that would be centered - the first line or the second? If it's, say, the longest line that should be centered, with everything else aligned to its left margin, then I think you may have serious problems - although those more experienced may correct me - since you need to do some dynamic calculation.

Or is it some sort of "typical" centering that you want? If it's this that you want, then perhaps you could achieve approximate results by setting the left margin of your div to something suitable.

[DrDoc]

Sorry, misunderstood your post... Do this instead:

#myobject {
width: 300px;
left: 50%;
position: absolute;
top: 0;
margin-left: -150px;
}

The problem is that you always need a set width...

[Jocke]

TheDoctor, yes, it's the longest line that should be centered, with everything else aligned to its left margin. And yes, I it is a big problem!

Well it does work if I use a table, perhaps that's the only way to do it...