How do I center AND justify text, like in this image?

Question

I've taken a look at the other questions, but they're all about centering a blog of left aligned justified text. What I'm struggling with is to center the text and also justify it in a given width.

This is my current block of CSS code:

#body-container .intro p {
    top: 20px;
    width: 80%;
    margin: 0 auto;
    font-weight: 300;
    font-size: 32px;
    text-align: justify;
}

Any suggestions, thank you very much! :)

Answer 1

It's not a real solution, as it seems this is experimental and only works in firefox and explorer:

-moz-text-align-last: center;
text-align-last: center;

See: https://developer.mozilla.org/es/docs/CSS/text-align-last

Answer 2

Sorry for misunderstanding the question in the comments.

Is the content of the paragraph dynamic, or is it fixed?

If it's fixed, you could wrap the last line in a span tag.

span {
    text-align: center;
    display: block;
    width: 100%
}

I've updated the fiddle: http://jsfiddle.net/FuvHt/7

Answer 3

The only reliable way to do it right now is to cut the text out as an image.

If your site isn't responsive you can throw a <br /> tag in there, wrap a <span> on the last line, and then center align that text.

I'm really looking forward to the text-align-last css property becoming more widely adopted.