Home > Developer > JavaScript
Javascript implements vertical and horizontal center in a specified element, and javascript elements
This topic describes how to implement vertical horizontal center of an element with unknown width and height under a specified element. The following uses the span element as an example, this section describes how to implement the horizontal vertical center effect of the span element in the div. The Code is as follows:
<! DOCTYPE html>The above code implements the vertical and horizontal center effect of the span element in the div. The following describes the implementation process of the span element.
I. Implementation principle:
Although css clearly defines the size of the span element, it has a size after all. this size can be obtained using the offsetWidth and offsetHeight attributes, and then the span element is set to absolute positioning, then, set the left and top attribute values to 50% respectively, but this is not the center point vertical and horizontal center of the span element, but the vertical and horizontal center of the upper left corner of the span element, then, when the negative margin of the span element is set, the size is half the width and height of the span element. This achieves the vertical and horizontal center effect.Example 2:
Idea: the most troublesome thing to achieve is the normal and vertical center of water, where vertical center is the most troublesome. Considering the browser compatibility, I read some information on the Internet and found that there is no good way to center vertically in the page. Therefore, the position: fixed attribute is used to control the absolute position of the clock. The clientWidth and clientHeight are used to obtain the width and height of the clock, and the marginLeft and marginTop are controlled by javascript to center the clock.
<!doctype html>Example 3:
Idea: use relative positioning to set left and top values to (pw-w)/2 and (ph-h)/w. pw and ph are the width and height of External labels, w and h are the width and height of internal labels.
Core code:
The above is an example of how to center the three types of javascript implementations. You can refer to these examples to help you.
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
