CSS webpage layout tutorial 3: Fixed-width center in a column _ basic tutorial

Source: Internet
Author: User
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 )!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.