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

This article introduces to you what are the three major implementation methods of the central layout of DIV, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Do you know the method of DIV centering layout, here to share with you, because now that DIV+CSS layout is becoming more and more popular, how to achieve DIV centering seems to be a difficult problem.

Several implementation methods of DIV centering layout

Now that DIV+CSS layouts are becoming more and more popular, how to achieve DIV center seems to be a problem. This paper gives several methods to realize the central layout of DIV, which will be helpful to everyone.

* methods:

Body {margin:0pxauto; text-align:center;}

But if the following parsing method is not stated, the page will make an error. No center alignment!

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

But sometimes the page can not be written according to the above code format, such as changing the colorful scroll bar.

The second method:

Margin-left:50%; left:-width/2

The width here is not the Width in CSS, but the width of your DIV. For example, if your div is 768px wide, then you should set left:-384px.

The third method: use JS to control the DIV center.

The following short piece of code has been added to the page.

Script >

Function.js content:

If (window.screen.width > 800) {[xss_clean] ("body {margin-left:" + (window.screen.width-800) / 2 + "px} style >");}

It has been tested. Can be centered normally.

One additional point: the above JS must be placed after your CSS connection or.

◆ here is a detailed explanation of the method of DIV centering:

First, explain the meaning of several size attributes of windows and web pages in JS.

Document.body.clientWidth (visible area width of the web page): refers to the width of the area in which the browser displays the page, excluding the width of the browser's border and the width of the vertical scroll bar. The size varies with the size of the browser's window.

Document.body.clientHeight (visible area height of the web page): refers to the height that can be seen in the area where the browser displays the web page, excluding the width of the browser's border and the height of the horizontal scroll bar. The size varies with the size of the browser's window.

Document.body.scrollTop: the height of the page that is covered by the address bar and menu bar when the vertical scroll bar is pulled.

Document.body.scrollLeft: refers to the width of the left side of the page covered by the left line when the horizontal scroll bar is pulled.

Now let's analyze how the program can achieve DIV centering:

What we want to implement in ◆ * * step is to make the layer absolutely center when popping up, regardless of whether there is a scroll bar or not.

1. Calculate the position of the layer to the left and upper side of the display area

Note: divId refers to the layer to be centered, and divId.clientWidth is its width! @

VardivId=document.getElementById ("xxx")

Varv_left= (document.body.clientWidth-divId.clientWidth) / 2

Varv_top= (document.body.clientHeight-divId.clientHeight) / 2

two。 Re-assign the resulting value to the left and top properties of DIV

DivId.style.left=v_left

DivId.style.top=v_top

Description: divId is the id value of the DIV tag

So this layer is centered.

The second step in ◆ is to center the layer that pops up while dragging the scroll bar.

In fact, it is very simple, we just need to add the width and height of the drag to the previously calculated left margin and top margin and OK.

V_left+=document.body.scrollLeft

V_top+=document.body.scrollTop

The complete code is as follows:

> the pop-up layer shows title > head > testspan > td > tr > table > I am centered. Div > body > html >

It is mainly the role of this code: (window.screen.width-800) / 2max / calculate the margin value that should be left on the page. 800 is my DIV width + scroll bar width. The actual application will be changed to your own size.

On the DIV central layout of the three major implementation methods are shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.