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

css alignment text-alignment
bravokiloecho picture bravokiloecho · Nov 30, 2012 · Viewed 22.5k times · Source

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

qooplmao picture qooplmao · Nov 30, 2012

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

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

Related questions

How can I centre left aligned text even when it wraps?

I need to centre a block of left aligned text within a div, but I need the visual width of the text block to be centred not the block itself. In many cases this may be the same thing, but …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More