CSS Center Multiline Text, with all beginning on the same vertical line

madorian
madorian used Ask the Experts™
on
I find all kinds of examples centering text, but I can't seem to figure out how to center mulitline text like this:

                 This is the first line
                 This is the second line

Both lines begin at the same point. This might be an easy one, but I'm stuck.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
How is your example centered?

Commented:
That's not centered, that's left aligned with a margin. It's on the Page layout tab.
Paragraph->Indentation->Left, and there put the margin you want.

HTH,
Dan

Author

Commented:
If I use a margin,  then if I add more text to one of the lines, it wont adjust and recenter. Actually, it should center based on the longest line, while at the same time making sure that all lines start at the same position. A bit hard to explain;)
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Sorry have no idea what you mean - text is centered or it is left / right aligned or justified.

Not sure what you are asking for.

Commented:
So... let's use a drawing:

centered:
___|||||||___
_____|||_____

left aligned:
__|||||||__
__|||______

right aligned:
__|||||||__
______|||__

Open in new window

Which of these do you want?

Commented:
Are you asking how to center a div within a div where the content is left aligned?

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - +
|        + - - - - - - - - - - - - - - - - - +          |             
|        | This is the first line            |          |
|        | This is the next line             |          |
|        + - - - - - - - - - - - - - - - - - +          |
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - +

Open in new window

Author

Commented:
gregg_s; yes, exactly;)

Commented:
In Word, use a text box. Put it wherever you want on the page, and use left aligned text in it.

@greg: great mind reading!
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
@gregg_s - nice catch.

So you want the box to always be the width of the longest line?
Something like this
    <div style="position: relative; text-align: center;">
      <div style="display: inline-block; border: 1px solid blue; text-align: left; padding: 20px;">
        <p>This is the longest line in this block</p>
        <p>A short line.</p>
        <p>An even shorter line ...?</p>
      </div>
    </div>

Open in new window

Working sample here

Author

Commented:
Yes, exactly;) Thanks and sorry for the delay accepting the solution.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial