The overall center of the page is the most commonly used form of Web page design, in the traditional table layout, we use the align= "Center" attribute of the table to achieve. The div itself also supports the align= "center" attribute, and allows the div to be centered, but the CSS layout is designed to achieve performance and content separation, while the align alignment attribute is a style code written in the div attribute of XHTML, There is a violation of the sharing principle (separation can make your site more conducive to management), so should be the CSS method to achieve the content of the center, we have a fixed-width column layout code as an example, for it to increase the center of the CSS style:
Copy Code code as follows:
#layout {
border:2px solid #A9C9E2;
Background-color: #E8F5FE;
height:200px;
width:300px;
margin:0px Auto;
}
The margin property is used to control the outer margin of the top, right, bottom, and left four directions of an object, and when margin uses two parameters, the first parameter represents the top and bottom margin, and the second parameter represents the left margin. In addition to using values directly, margin does not support a value called Auto,auto value is to allow the browser to automatically determine the margin, where we give the current div left and right margin set to auto, the browser will be the left and right side of the div set to be equal, and presented as a centered state, so as to achieve the results of the Bureau.
Note: This method is centered for IE6 the following browsers are not supported, and the CSS hack section below explains the solution in detail.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> a column fixed width centered--www. AA25. cn</title> <style type= "Text/css" > <!--#layout {border:2px solid #A9C9E2; Background-color: #E8F5FE; height:200px; width:300px; margin:0px Auto; }--> </style> </pead> <body> <div id= "Layout" > one column Fixed width centered (AA25. CN) </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The action step is the same as a column fixed width, except that the CSS border setting item will be set to 0, auto, 0, auto, respectively, on the top, right, bottom, and left of the border.
