Foreword
Open two years ago, when the work blog, a blog written two years ago, only now and then to regain pen. There are two reasons, first, perceived lack of technology, second is lazy.
Due to the recent demand encountered in the project is dragging the column to adjust the column order of the table, and finally found a JQuery plugin called DataTables based, but whom write online use is small, the quality is very poor, so we move of whom write articles using a more comprehensive approach, but also because of the recent projects busy, so the week passed yet written, taking the time to write this article today, as the plug-in is after taking the time to write.
This article is a method much, but they are more commonly used, sufficient to solve the problem.
text
Horizontal and vertical center
1. Elements are positioned so as to center (using the method of locating and transform that would need to write a translation)
Add the following style elements of the parent to center:
The reason: the need for a parent to set a non-static positioning to absolute positioning of elements set
position: relative;
Add the following style to center elements:
Note: do not give centrally arranged element width is high, it provided the element will be positioned parent non-static (no html element words will be) the same width and height.
width: 40px; height: 40px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
We can use the above way to make a positioning element of the browser page display area with the width and height, specifically as follows:
Html element width and height is provided:
width: 100%;
height: 100%;
The element is provided as the style ( the element between the element and not the element is provided non-static html targeting ):
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
2. The layout of the sub-elastic centering elements
Set the following style elements of the parent to center:
width: 400px;
height: 400px;
display: flex;
Add the following style to center elements:
margin: auto;
Vertical center
Using the highest row in
Set the following style elements of the parent to center:
This method may be disposed within a vertical center line elements and text elements
line-height: 50px;
Horizontal Centers
1. The use of margin for centered
Add the following style to center elements:
Element must be set wide to center
width: 200px;
margin: auto;
2. Using text-align center style
Add to center the element's parent following styles:
This method may be disposed within a vertical center line elements and text elements
text-align: center;
Original article, reproduced please indicate the source: https://www.cnblogs.com/zhangdongya/p/11238763.html