12

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!

bravokiloecho
  • 1,413
  • 5
  • 22
  • 39
  • 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 Nov 30 '12 at 13:50

1 Answers1

26

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

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

qooplmao
  • 17,622
  • 2
  • 44
  • 69
  • 1
    You beat me to it. It only works because the other two elements in the outer div are also centered. – Enrico Nov 30 '12 at 13:54