Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this "CSS page layout center method" article, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "CSS page layout center method" article.

First, let the DIV+CSS page layout center analysis and introduction

In general, the layout of the main content of the web page is centered on the browser. For example, the home page of DIVCSS5 (http://www..com/), the main body is centered layout.

Screenshot of the presentation of centered page layout

How to use CSS to center the entire page layout? What are the conditions for the layout to be in the middle?

First of all, we need to set the css content center style (css text-align:center) for body, and then use margin:0 auto to center the object layout when laying out the outermost DIV box.

Of course, we use margin:0 auto on the box object, some browsers do not add text-align:center style to the body object, the layout is still centered, this is because different browsers have different default styles, if you do not set text-align:center to the body, this will cause some browser layouts to be centered, some to the left, and the layout compatibility will be generated.

Explanation: margin:0 auto, which means that the interval between the top and bottom of the object is 0, the interval between the left and right sides of the object is automatic, and the interval between the left and right sides of the object is automatically expanded to understand css margin.

II. Summary of the conditions for centering the layout of DIV CSS pages

1. Set CSS content center style text-align:center to body, code: body {text-align:center}

2. Set the margin:0 auto style to the outermost object, code:. {margin:0 auto}

III. Examples of web page layout being centered

To observe the effect of the layout centering, we named the object "." for CSS, set the CSS border to black, and set the width of css to 400px and CSS height to 100px.

1. The css code is as follows:

Body {text-align:center}. {margin:0 auto;width:400px;height:100px;border:1px solid # 000} / * CSS Note: set the border, width and height of the object to facilitate the observation of the layout effect * /

2. HTML code snippet:

Object DIVCSS5 layout is centered

3. Screenshot of layout centered effect

The above is about the content of this article on "the method of centering the layout of CSS pages". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.