(^100) Chapter 3 Configuring Color and Text with CSS
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.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-leftproperty, margin-right
property, and widthproperty. 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-leftand margin-rightproperties 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-leftand margin-rightare both set to auto, the
browser calculates the amount of space available and divides it evenly between the left
and right margins. The widthproperty configures the width of a block-level element.
The CSS code sample below sets the width of an idnamed wrapperto 700 pixels and
centered (using margin-left:autoand margin-right:auto).
#wrapper { width: 700px;
margin-left: auto;
margin-right: auto;
}Figure 3.18
The Web page
content is centered in
the browser window