Horizontally center <p> within a div while keeping the text left-aligned

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!

So you want it to be centered if the string of text hass less width than the parent div? And left-aligned when it IS wider than the div? — paddotk

qooplmao qooplmao · Accepted Answer · 2012-11-30T13:51:52

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

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

Horizontally center <p> within a div while keeping the text left-aligned

1 Answers