Question

I have multiple divs with a fixed width containing <p> tags which contain various lengths of text.

I want this text to remain left-aligned but if the text does not take up as much space as the div width, I would like to align this text centrally.

I assume the best way of achieving this would be to horizontally center the <p> within the div while keeping the text left-aligned but I’m not sure how to do this.

I have tried setting margin:0 auto;but the <p> always resizes to the width of the div (unless I tell it otherwise, but I don’t want to do this because if the text runs for longer than the div I don’t want to break it early…)

I’ve set up a JSfiddle here to demonstrate: http://jsfiddle.net/VDhUa/

(Basically in this example I would like to “Lorem ipsum…” stuff to be centrally aligned without using text-align:center;)

Any Help would be greatly appreciated.

Thank you!

Answer 1

Set your outer div to text-align: center; and your inner p’s to display: inline-block;

Fiddle: http://jsfiddle.net/ZL4GM/