How can I center something if I don't know ahe

Question

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?

Answer 1

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>

Answer 2

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

Answer 3

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" 

Answer 4

Eh, auto margins need set width since by default block-level element, such as

would expand onto whole available width.

If you're not supporting IE < 8 you could just set { display: table; margin: 0 auto; }

Otherwise, if your element is surrounded by block-level elements, you could do p { display: inline-block; } p { display: inline; } html > /**/ body p { display: inline-block; } (last two rules are for IE and resetting IE fix for sane browsers) after that, apply { text-align: center; } on the container.

As someone mentioned already, see http://haslayout.net/css-tuts/Horizontal-Centering for more info.

Cheers! Zoffix Znet

Answer 5

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!

Answer 6

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.