Home > Developer > Web Develop
jquery implements the div vertically horizontally centered instance code:
There is a DIV element in the window, and here's how to use jquery to set it to align horizontally and vertically, hoping to bring some help to your friends.
The code example is as follows:
<!DOCTYPE HTML> <HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Author"content= "http://www.softwhy.com/" /> <title>jquery Implementation Div Vertical Center Instance code-ant Tribe</title> <styletype= "Text/css">. ClassName{margin:0 Auto;width:200px;Height:200px;Background-color:#609; } </style> <Scripttype= "Text/javascript"src= "Mytest/jquery/jquery-1.8.3.js"></Script> <Scripttype= "Text/javascript">$ (window). Resize (function(){ $('. ClassName'). css ({position:'Absolute', Left: ($ (window). Width ()-$('. ClassName'). Outerwidth ())/2,Top: ($ (window). Height ()-$('. ClassName'). Outerheight ())/2+$ (document). ScrollTop ()})}) $ (window). Resize (); </Script> </Head> <Body> <Divclass= "ClassName"></Div> </Body> </HTML>
The above code implements the vertical center effect of the Div, which is the implementation process as described below:
I. Principle of implementation:
1. How the horizontal center is implemented: the div can already be horizontally centered in the CSS file, as long as you add the following code:
margin:0 Auto;
2. How to achieve a vertical center effect: By using jquery, the top property value of the DIV is set to the following value to be vertically centered in the window:
Top: ($ (window). Height ()-$ ('. ClassName '). Outerheight ())/2The above code can implement the div in the vertical center of the window, but there is a problem, if there is a scroll bar in the vertical direction, then it may be invalid, because the size of the scroll up to be counted, so that is why the code needs to add $ (document). ScrollTop ().
Two. Related reading:
The 1.css () function can be found in the section of the CSS () method of jquery .
The 2.width () function can be found in the section of the width () method of jquery .
The 3.height () function can be found in the height () method section of jquery .
The 4.outerHeight () function can be found in the Outerheight () method section of jquery .
The 5.scrollTop () function can be found in the ScrollTop () method section of jquery .
The 6.resize event can be found in the Resize event section of jquery .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=9271
For more information, refer to: http://www.softwhy.com/jquery/
jquery implements DIV Vertical Horizontal Center Instance Code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
