CSS webpage layout tutorial 3: fixed width center in one column
CSS webpage layout tutorial 3: Fixed-width center in a column _ basic tutorial
The center of the page is the most common form of webpage design. In the traditional table layout, we use the table's align = "center" attribute ,. P itself also supports the align = "center" attribute, and can also center p, but the css layout is to achieve separation of performance and content, align alignment is a style code written in the p attribute of XHTML, which violates the sharing principle (separation can make your website more manageable ), therefore, the css method should be used to center the content. We will take the layout code of a fixed width column as an example to add the css style of the Center for it:
The Code is as follows:
# Layout {border: 2px solid # A9C9E2; background-color: # E8F5FE; height: 200px; width: 300px; margin: 0px auto ;}
The margin attribute is used to control the margin of the object in the top, right, bottom, and left directions. When margin uses two parameters, the first parameter indicates the top and bottom margins, and the second parameter indicates the left and right margins. In addition to using values directly, margin does not support auto. The auto value allows the browser to automatically determine the margins. Here, we set the left and right margins of the current p to auto, the browser will set the left and right margins of p to the same and display it in the center state, thus achieving the effect in the local environment.
Note: This method is not supported by browsers earlier than IE6, And the css hack section below describes the solution in detail.
The operation steps are the same as the fixed width of a column. You only need to set the top, right, bottom, and left borders to 0, auto, 0, and auto in the CSS border settings.
The above is the CSS webpage layout tutorial 3: a column of Fixed-width center _ basic tutorials. For more information, see PHP Chinese website (www.php1.cn )!