what is the difference between using [align:center] and [margin: 0 auto] to center an element in css?

Question

i have read in a lot of places to center the elements ( a div for example) using margin:0 auto.
but why not use align:center?
i think it seems more natural to use the later.
also will the alignment using margin work verticaly too ?
thanks

Answer 1

text-align: center will center the contents of the container, while margin: auto will center the container itself.

You should be careful with margin:auto because it is not supported in IE6. In IE6, you should set text-align:center on the outer container, and reset the CSS for the container itself to text-align:left.

Answer 2

text-align=center used to align the content (text for example) to center, however margin: auto is used to align the element itself to center.

In older browsers however (IE), you could align elements to center using text-align:center.

But I suspect you meant align=center like in below example:

<p align="center">
 .......
</p>

<h1 align="center">
 .......
</h1>

However, not all elements have align="center", you will have to use margin:0 auto to align for them.

So,

If you want to align content of an element, you should do:

<p style="text-align:center">
 .......
</p>

If you want to align element itself, you should do:

<div style="margin:0 auto;">
 .......
</div>

<p style="margin:0 auto;">
 .......
</p>