JavaScript and CSS implement table centered display with expression _javascript tips

Source: Internet
Author: User
The previous blog is about setting Div to center, and sharing the display of how to center the table today. As for the principle of centering is not to say, you can look at my last blog, this time did not use window two events, but the use of a function called expression. This function is now supported by most browsers. When I wrote a blog, I was wondering if I could assign the values to the left and top properties of the CSS. This function was found later in the lookup. This function is used to associate CSS attributes with JavaScript expressions, where the CSS attribute can be an intrinsic attribute of an element or a custom property. This means that the CSS attribute can be followed by a JavaScript expression, and the value of the CSS property equals the result of JavaScript. You can refer directly to the properties and methods of an element itself in an expression, or you can use a different browser object. The expression is as if it were in a member function of this element.

Well, first look at the center of the source code bar!

It is clear to see that the value written in the expression function is the sum of the formulas. That is, the high width of the document minus its height, and then dividing by 2 is the top and left values. Place the code in the style attribute and center it. As shown in the figure:

This allows you to center the display.
Would like to write this code into the CSS, the answer is OK, so after the code becomes the following:

This allows the table to be centered through CSS and JavaScript, so it looks good when you log in to the page. It's simple!
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.