Cascading Style Sheets/Centering

From Wikibooks, the open-content textbooks collection

Jump to: navigation, search

Centering block level elements is not directly supported by CSS, but can be achieved by a workaround:

.centered {
  margin-left: auto;
  margin-right: auto;
}

If you set the left and right margins of a block element to "auto", it will be centered, as the browser will try to keep an equal amount of space on both sides. This only works for elements whose size is a known quantity, such as an image, so the layout engine knows what to work with. Tables seem to center without defining a size, so the behavior varies by element.

The effect of setting left and right margins to auto is shown in the following:

This 16em div should be centered because the size is defined.

This unsized div should just be stretched out as the size is not defined.

Retrieved from "http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Centering"