Home  >  Article  >  Web Front-end  >  JavaScript and CSS realize centered display of Table through expression_javascript skills

JavaScript and CSS realize centered display of Table through expression_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:30:511114browse

The previous blog talked about setting the div to be centered . Today I will share how to center the table. As for the principle of centering, I won’t go into details. You can take a look at my last blog. This time, instead of using the two events of window, I used a function called expression. Most browsers now support this function. When I was writing my last blog, I was thinking about whether I could assign the calculated values ​​to the left and top attributes of css? Later, I looked up the information and found this function. This function is used to associate CSS properties with JavaScript expressions. The CSS properties here can be inherent properties of the element or custom properties. That is to say, the CSS attribute can be followed by a JavaScript expression, and the value of the CSS attribute is equal to the JavaScript result. You can directly reference the properties and methods of the element itself in the expression, or you can use other browser objects. The expression is as if it were within a member function of this element.

Okay, let’s take a look at the centered source code first!
JavaScript and CSS realize centered display of Table through expression_javascript skills
You can clearly see that the value written in the expression function is the summarized formula. That is, the height and width of the document minus its own height and width, and then divided by 2 are the values ​​of top and left. Put this code in the style attribute and it will be centered. As shown in the picture:
JavaScript and CSS realize centered display of Table through expression_javascript skills
This way it can be displayed in the center.
Would you like to write this code into css? The answer is yes, so the code will become as follows:
JavaScript and CSS realize centered display of Table through expression_javascript skills
In this way, you can use CSS and JavaScript The table is displayed in the center. This will make the login page look better. It's very simple!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn