How Can I Center Something If I Don't Know Ahead Of Time What The Width Is?

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 paragrap

Solution 1:

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>

Solution 2:

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

Solution 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" 

Solution 4:

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!

Solution 5:

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

is tableless and is working in any browser!