Question

I need to set width or max-width in order for margin:auto to work, right? Like in this jsFiddle.

Trouble is, the paragraph width is equal to max-width and so the block of text is not properly centered.

How can I make the width of the paragraph contract to be only just big enough to contain the text, expanding to max-width as necessary?

No javascript and no fixed widths. Thanks.

Answer 1

I’m not sure, but maybe an inline-block paragraph is what you’re looking for:

<div>
    <p>Lorem ipsum dolor sit amet</p>
</div>​

div { text-align: center; }
p { display: inline-block; text-align: left; max-width: 40ex; }

http://jsfiddle.net/wuqaH/1/