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

This article introduces the relevant knowledge of "how to center the content of the whole page to adapt to the automatic scaling of the content". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

First of all, click here to see the actual running effect, this page can be centered and highly adaptive in mozilla, opera, and IE browsers. Let's analyze the code:

The code is as follows:

Body {

Background:#999

Text-align:center

Color: # 333

Font-family:arial,verdana,sans-serif

}

# header {

Width:776px

Margin-right: auto

Margin-left: auto

Padding: 0px

Background: # EEE

Height:60px

Text-align:left

} # contain {

Margin-right: auto

Margin-left: auto

Width: 776px

} # mainbg {

Width:776px

Padding: 0px

Background: # 60A179

Float: left

}

# right {

Float: right

Margin: 2px 0px 2px 0px

Padding:0px

Width: 574px

Background: # ccd2de

Text-align:left

}

# left {

Float: left

Margin: 2px 2px 0px 0px

Padding: 0px

Background: # F2F3F7

Width: 200px

Text-align:left

}

# footer {

Clear:both

Width:776px

Margin-right: auto

Margin-left: auto

Padding: 0px

Background: # EEE

Height:60px;}

.text {margin:0px;padding:20px;}

Header

Right

one

one

one

one

one

Left

Footer

Code analysis:

First we define body and the first line # header at the top, where the key is that text-align:center; in body and margin-right: auto;margin-left: auto;, in header center header through these two sentences. Note: in fact, the definition of text-align:center; is already centered in IE, but it is not valid in mozilla. You need to set margin:auto; to achieve the centering in mozilla.

Next, define the two middle columns # right and # left. To center the middle two columns, we nest a layer # contain outside them and set margin:auto;, on the contain so that # right and # left are naturally centered.

Notice the order in which the middle two columns are defined. We first define # right and float it on the rightmost side of the # containment layer through float: right;. Then define # left and float it on the left side of the # right layer through float: left;. This is contrary to the order in which we previously defined the table from left to right (correction: left to right, or right to left, designed according to your own needs).

We see a layer # mainbg nesting between # contain and the two columns in the code. What is this layer for? This layer is used to define the background of # contain. You must ask, why not just define the background in # contain instead of one more layer? That's because the background defined directly in # contain will not be displayed in mozilla, and the height value must be defined. If the height value is defined, the # rightlayer cannot automatically scale according to the content. In order to solve the background and height problems, such a # maing layer must be added. The trick is that the layer # mainbh defines float: left;, because float makes the layer automatically have properties of width and height. (understand it this way for the time being:)

Finally, define the # footer layer at the bottom. The key to this definition is that the purpose of the clear:both;, sentence is to cancel the floating inheritance of the # Footer layer. Otherwise, you will see # footer next to the # header display, not under # right.

When the main layers are defined, the layout is ok. One additional point: you can see that I have also defined a .text {margin:0px;padding:20px;}. The purpose of this class is to make the content have 20px white space around it. Why not define margin or padding directly in # right, because mozilla and IE have different interpretations of the css box model, and directly defining margin/padding will cause layout deformation in mozilla. I usually use the method of another layer inside to solve the problem.

This is the end of the tutorial on how to center the content of the entire page to make it highly adaptable to automatic scaling of the content. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.