Various implementation methods for vertical center of Elements

Various implementation methods for vertical center of Elements
I once said, "My three provinces and my bodies", which means I have to think about what I have done many times every day ~. Well, we all know this. Why do we need to talk about it here? It is very simple, that is, there are a lot of people to know, but few people can do it. Based on your work experience, I would like to talk about some misunderstandings of front-end development: I only know what it is, but I don't know why it is. If I have solved the problem, I will forget it again next time. I want to find relevant information. google, I believe that many people (including myself) will be able to make mistakes in these misunderstandings. There are a variety of reasons: projects are sometimes very urgent, we don't have time to drum up these things; well, we'll find the materials later. We already know how to find the keywords. I'll go, brother (sister) and female (male) when you go shopping, you don't have time to make these details ;...... the reason for conclusion is that the technology is not focused enough and there is no enthusiasm for in-depth exploration. Someone may have refuted the question: "Wipe, css has limited attributes, and I don't feel any good" (ps: I used to report this attitude, I am ashamed ). Is this true? Css is actually a very profound study. Although there are only some attributes, the various values of attributes, the matching between attributes, and the differences between attributes ......, what are the differences between browsers? We often feel why others will achieve some good results and propose good solutions. In fact, they have a thorough understanding of attributes and attribute values, know what kind of matching can produce what kind of effect. So, cool, if you want to make some progress at the front end, let's take a good look. Focus, practice, learning, and induction this article is the beginning of the css learning summary. It is also a summary of my recent insights. I hope to have some thoughts on you, so I will not talk much about it. At the beginning, I encountered a problem on the dump page recently. How can I center text vertically with images? In fact, there are a lot of answers to this question on the Internet, and many of their peers also have their own solutions. The following describes how to find the materials and summarize them through their own experiments, which will focus on the advantages and disadvantages. After talking about this, the next step is to display the final display effect. If you do not know what the effect is, click Smecta 1. the inline-height method is believed to have been known and tried by many people, mainly by using the inline-box model (ps: this can be viewed in @ Xu GE's article. The floating layout is based on the display: inline-block List layout. Xu GE has made it clear about the principle, in this case, you can set the value of inline-heigth to be consistent with the height of the parent element to display the text in the center. The style is as follows :. inline {display: inline; * display: inine; zoom: 1 ;}. lg {font-size: 18px; font-weight: bold; line-height: 80px;/* Note: line-height is the same as the container height */}. Here, there will be no more, so as not to waste valuable time. O (worker _ worker) O ~, Click here to view the final result. The source code can be viewed in the developer tool, the same below. 1.1 The advantage is simple and can be achieved with few styles; strong compatibility, compatible with IE6 +, chrome and Firefox (opera has not tried) 1.2 defects can only be used for single lines of text, excessive text spacing, click to view the effect. To know the height of the parent container, if you do not want to set the height, you can only obtain and set it through javascript, increasing the complexity. line-height can only be applied to inline and block-level elements; 1.3 summary the line-height method for vertical text center is good for a single line of text. It doesn't matter what adjacent elements are, images, and texts. After a period of use, it can be said that the effect is good. Of course, if you want multi-line text or adaptive layout, we recommend that you do not use this method because ~~~~ Not suitable. % >_< % 2. using absolute + margin: auto involves the concept of locating the attributes of the margin attribute, the absolute positioning element determines the final position based on its own height and margin value during filling. If everything is set, the entire parent container is filled by default, and the final position is determined by margin when the size is fixed. For more information about the concept, click here to view the final result. css is as follows :. parent {position: relative ;}. abs {position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; height: 20%;} 2.1 Advantages of simple text, the sibling element can also correspond to the center. No matter what the sibling element is, click "adaptability". The parent container does not have to limit the height of the parent container to 2.2 defect IE6, and the parent container does not have to limit the height of the parent container to 2.3 defect IE6. 7 incompatible, 7 applications are very efficient and practical. This method is not recommended in actual project usage, because it is definitely positioned to break away from the document stream and will bring about some maintenance problems, and is not conducive to reuse. Of course, all of these are trade-offs. After considering the development and maintenance costs comprehensively, you can adopt them if you think they are appropriate. 3. the display: table-cell method is used for table-cell Layout. In fact, table-cell, as the name implies, is a cell, the element with table-cell set is actually the same as the traditional td tag. Click here for the final effect. The Code is as follows :. cell {display: table-cell; height: 80px; vertical-align: middle;} 3.1 advantages: simplicity, high efficiency, adaptability, 3.2 disadvantages: IE6, 7 incompatible (font-size can be used if the image is centered, text is not allowed) the container height is fixed. Setting overflow: hidden will cause the text to not be displayed and the sibling element is not centered, result 3.3 summary the table-cell method is a good solution in general. Of course, the disadvantages are also obvious. See the above. Use the inline-block method. This method is the best method I personally think so far. The reason is simple: easy to understand, easy to use, and compatible. In essence, this method utilizes the vertical center alignment feature of inline-block. Click on me. If you do not want to see the effect, you can directly view the code, as shown below. inline-block {display: inline-block; * display: inline; zoom: 1; vertical-align: middle;} 4.1. There is nothing to say about this method, both compatibility and other features can be perfectly presented without having to know the text height, and can perfectly adapt to text with a height greater than the image. To be honest, you must first understand the inline box model ). 5. The method of using the button method is inadvertently seen. In fact, the principle is very simple, but it is very creative. That is, use the special properties of the control. The button label is an example. Because of its features, we can use it to achieve the corresponding effect. Click me. The Code is as follows: <button> <a href = "#" class = "inline-block w60p verticalmiddle" style = "text-align: left;"> Sheng SongCheng: china Credit structure continues to improve </a> </button> 5.1 advantages take advantage of the properties of the button itself, it is simple and clear, and does not even need to write css. It can be highly adaptive to text 5.2. The typical disadvantage is that labels are used for effects. Low maintainability does not meet the semantic nature of tags and is not friendly to search engines.