Examples

This page is centered with the script (and standards-mode is not enabled). Below are some more examples:

Example 1

Nested DIVs with individual margin-left and -right settings.

#ex11, #ex12, #ex13 /* divs */
{
	width : 80%;
	margin-left : auto;
	margin-right : auto;
	padding : .3em;
	background : gray;
}

Example 2

A single paragraph element.

paragraph, 150px wide, automatic margins.

#ex21 /* paragraph */
{
	width : 150px;
	margin : 1em auto 2em;
	background : #ddd;
}

Example 3

A simple 3 by 2 table.

Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

#ex3 /* table */
{
	margin : 0 auto 0 auto;
}

Example 4

An image element, which is inline by default. Notice how the auto margin has no effect on the image. Since images are inline elements, automatic margins do not apply to them directly. They only apply to block-level elements.

Inline image here. It should flow with the text, and wrap when appropriate.

#ex4 /* image */
{
	margin : auto;
}

Example 5

This image should be affected because the display is set to block.

Here is a block-level image. It takes up its own block of space, even though it is contained in the same paragraph.

#ex5 /* image */
{
	display : block;
	margin : auto;
}

---

>From Internet Explorer Margin Fix by David Schontzler. Article resides at: Stilleye.com and the 13th Parallel.