Question

I have a section of content in a div, and this is currently centered to the left. Fiddle.

I tried adding a container div like:

<div style='text-align:center; width:100px;'>[content]</div>

But no luck. Also tried this:

<div style='margin: 0px auto; width:100px;'>[content]</div>

Content is still left aligned.

This works, but I’d like to find the right way to do this with CSS:

<div style='width:100px;' align='center'>[content]</div>

Assistance appreciated. I’m tempted to do this with tables, but I need to break out of old habits!

Answer 1

If you try to get the outer div centered respect to its parent (bodyin this case) you should set its lateral margins to auto:

body div{
    margin: auto;
}

as you can see here