CSS page layout Getting Started Tutorial 3: A fixed-width Center _ Basic Tutorial

CSS Page layout Getting Started Tutorial 3: A fixed-width Center _ Basic Tutorial

The overall center of the page is the most widely used form of web design, and in the traditional table layout, we use the align= "Center" attribute of the table to implement it. P itself also supports the align= "center" attribute, but also allows p to be centered, but the CSS layout is for the separation of performance and content, while the Align alignment property is a style code that is written in the XHTML p attribute. There is a breach of the sharing principle (separation can make your site more conducive to management), so should be CSS method to achieve the center of content, we use fixed-width column layout code for example, for it to increase the center CSS style:

The code is as follows:

#layout {      border:2px solid #A9C9E2;      Background-color: #E8F5FE;      height:200px;      width:300px;      margin:0px Auto;  }

The margin property controls the margins of the top, right, bottom, and left four directions of an object, and when margin uses two parameters, the first parameter represents the top bottom margin, and the second parameter represents the left margin. In addition to the direct use of numeric values, margin does not support a value called Auto,auto value is to let the browser automatically determine the margin, here, we give the current p left and right margin set to auto, the browser will be P's left and right margin is set to the same, and rendered as the center state, so as to achieve the results.
Note: This method is centered on IE6 the following browsers do not support, behind the CSS hack section to explain the solution.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML

The procedure is the same as the fixed width of a column, except that the CSS border setting item sets the top, right, bottom, and left sides of the boundary to 0, auto, 0, auto, respectively.

The above is the CSS page layout Getting Started Tutorial 3: A fixed width of the center of the basic tutorial content, more relevant content please follow topic.alibabacloud.com (www.php.cn)!

