views:

318

answers:

8

I am trying to center a paragraph tag with some text in it within a div, but I can't seem to center it using margin: 0 auto without having to specify a fixed width for the paragraph. I don't want to specify a fixed width, because I will have dynamic text coming into the paragraph tag and it will always be a different width based on how much text it is.

Does anyone know how I can center the paragraph tag within the div without having to specify a fixed width for the paragraph or without using tables?

A: 

Try this using inline CSS:

<p style="text-align: center;">Lorem ipsum dolor sit amet</p>

Or using just HTML

<p align="center">Lorem ipsum dolor sit amet</p>
victor hugo
Inline CSS is bad practice compared to an external stylesheet and using the align attribute is bad practice compared to using CSS.
Garry Shutler
+2  A: 

Found this: Centering Block-level Content With Unknown Width.

drdaeman
+8  A: 

Here's how to do it using a style sheet.

Style sheet:

div.center-content
{
    text-align: center;
}

div.center-content p
{
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

HTML:

<div class="center-content">
    <p>Lorem ipsum dolor sit amet</p>
</div>
Garry Shutler
Can you explain why we need the second CSS rule?
Aaron Digulla
Mostly habit on my part to remove the center alignment of text as soon as I don't need it any more. In this case it will have no effect.
Garry Shutler
The auto margins may help alignment in some browsers, again it's just something I do out of habit and can't remember the precise reason for.
Garry Shutler
Ah ... now, I get it. Without the rule, the "p" would inherit the "text-align: center" from the "div" around it (so the text *inside* the paragraph would be centered, too).
Aaron Digulla
Yes, exactly. I forgot to switch it back enough times to do it by default now.
Garry Shutler
+1  A: 

Besides "text-align" property

for centering elements inside block elements like div

use css like


 margin:auto

something like what is posted below

When vertically-centering, its better to use Tables (this in most cases is the only the cross-browser compatible solution )

you can use

 "text-align:center"  

 "vertical-align:middle" 
Rishav Rastogi
A: 

if the div has set width all you need is

.myDiv { text-align:center; }

Also listen to garry's comment. under no circumstances use inline css.

Also another dirty fix for this in case you have other stuff in the div to centre:

you can always:

$('.youParagraph or .otherContent').wrap('');

Obviously do not practice this if you work within a large team and separation of concerns is an issue.

I hope this helped.

Ali
A: 
+1  A: 

I think the best method is to contain the element in a block level element and do:

.innerElement {margin:0 auto}

Given they are both block level elements that don't have the float parameter, it should work great!

Joseph Silvashy
+1  A: 

here a nice workaround for centering a div with no width.

is tableless and is working in any browser!

snowalker