Configuring Color and Text with CSS - Web Development and Design Foundations with XHTML - page 100

While it can be quite effective to center the text displayed in Web page headings, be
careful about centering text in paragraphs. According to WebAIM ( http://www.webaim
.org/techniques/textlayout), studies have shown that centered text is more difficult to
read than left-aligned text.
Center the Page Content
A popular page layout design that is easy to accomplish with just a few lines of CSS is
to center the entire content of a Web page within a browser window. The Web page
shown in Figure 3.18 uses this type of page layout.
Figure 3.18
The Web page
content is centered in
the browser window
Compare the left and right margins of Figure 3.18 to the Web page displayed in Figure
3.12. It's easy to configure this centered layout. Create a <div> to contain, or wrap, the
page content and then configure it with the CSS margin-left property , margin-right
property , and width property . As will be discussed further in Chapter 6, the margin is
the empty space surrounding an element. In the case of the body element, the margin is
the empty space between the page content and the edges of the browser window. As
you might expect, the margin-left and margin-right properties configure the space
in the left and right margins. The margins can be set to 0, pixel units, em units, percent-
ages, or auto . When margin-left and margin-right are both set to auto , the
browser calculates the amount of space available and divides it evenly between the left
and right margins. The width property configures the width of a block-level element.
The CSS code sample below sets the width of an id named wrapper to 700 pixels and
centered (using margin-left:auto and margin-right:auto ).
#wrapper { width: 700px;
margin-left: auto;
margin-right: auto;
}