HTML Paragraph with Perfect Alignment

Question

I want to perfectly align a paragraph so that the entire paragraph is in the center of the page but the left and right side are perfectly aligned. Here's a picture example of a paragraph that is perfectly aligned:

The paragraph looks like it's in a box of some sort, with perfectly straight left and right side. How do I do this in css or html?

Solution

The wrapper needs to have text justification applied via CSS:

text-align:justify;
text-justify:inter-word;

In general, browsers do a crappy job as fully-justified text compared to "typesetting" applications for print. In general, full-justification on browsers makes text HARDER to read and should generally be avoided.

css:

.justify {
    text-align:justify;
    text-justify:inter-word;
}

HTML

<div class="justify"> ...your text...  </div>

Comments

[Richard]

this is what i want but how do I also make the text in the center of the page? Should I put a div around it?

[MikeSmithDev]

set div width to whatever width you want and margin:auto and the text position will be centered on the page. <div style="width:500px;margin:auto;">

[Richard]

@MikeSmithDev perfect that completes all the things that I want. Thanks so much to Diodeus too.

[Patrick James McDougle]

Just so you know, justified text has readability implications and you should make sure that the design benefits outweigh those readability concerns.

[jonrsharpe]

Also answers shouldn't just be the same information already available for years (see also stackoverflow.com/q/11598840/3001761, stackoverflow.com/q/9495007/3001761).