CSS Horizontal alignment:
when to use margin-left, margin-right and when to use text-align

This is a 300px paragraph

Margin properties:

Text-align property:

Margin-left and margin-right will position a block-level element within its own immediate containing element

Reference: CSS 1 horizontal formating (margin property) says: "if both 'margin-left' and 'margin-right' are 'auto', they will be set to equal values. This will center the element inside its parent."

Text-align property positions text and/or inline-element (text and/or images) within an element.


Set text-align property of above orange-bordered paragraph:

Reference: CSS 1 text-align property says: "The [text-align] property describes how text (and inline elements) is aligned within the element."

Other instructive examples and interactive demos on centering:

Valid HTML 4.01! CSS compliant Web standards project