Recently, some friends on Weibo are struggling.Vertical center of unknown height textProblem. This is similar to the vertical center of an unknown height image, but you need to pay attention to some details.
Here is the vertical center of an unknown width and height dialog box previously written (do you want to change the size by dragging it to see if it is still centered ?), The dialog box is centered relative to the viewport. The text here needs to be vertically centered relative to the container.
Do not consider how to be compatible with IE6/7. First think about the vertical text center on what attributes? Vertical-align: middle, right. Naturally, the cute inline-block is connected. Well-developed 5-year UI front-end framework!
The main code is as follows:
. Code
Vertical-align alignment requires a reference object, so the box container generates a "spare tire" with a height of 100% through before. Its height is the same as that of the container, compared with the vertical center of the "spare tire", the vertical center is also displayed visually relative to the container. Let's try it together. Well-developed 5-year UI front-end framework!
1. We can find that the text is wrapped in line according to our ideas. Is it swollen? Demo:
2. Don't worry. Since the "backup" occupies the original text location, try using the negative value of margin, demo.
Does it seem to be hard to pinch? Messy bird ~ Well-developed 5-year UI front-end framework!
Remember that the inline-block elements we mentioned in "inline-block past and present" may have gaps. Is this a mess?
3. Do you still remember how to deal with gaps? Font-size: 0! Try it
4. If the world is harmonious, you only need to hide the content generated by before. See the final demo.
Finally, remember to remove the spare parts in "content! Compatible with IE8 +, WebKit, Firefox, and opera. (Do not ask me how IE6 is implemented. The idea is the most important)
See the animation demo when the height is changed:
It is true that the above is a very hack solution. In essence, it should be solved by Flex. In the face of such requirements, the idea is very important.
Unknown height multi-line text vertical center
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
