Centering the outer div, "text-align: center" does not work as expected

Question

I have a content section in a div, and currently it is in the center on 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 would like to find the right way to do this using CSS:

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

Help was appreciated. I am tempted to do this with tables, but I need to break free from old habits!

Answer 1

If you try to get the external trust of the div to its parent ( body in this case), you should set its side fields to auto:

 body div{ margin: auto; } 

as you can see here

Answer 2

The tool to center the div is actually margin: 0 auto; .

Answer 3

Wrap the content with another div inside the rounded corners.

And write style="width: 100%; margin: 0 auto;" for this new div