Recently, Weibo has friends who are more entangled in the unknown height of the text vertical center problem. This is a bit like "vertically centered" with "unknown height" images, but there are some details to note.
Here is a previously written unknown wide-height dialog box vertically centered (drag to change the size to see if it is still centered.) , except that the dialog box is centered relative to the viewport (viewport), where the text needs to be centered vertically relative to the container.
When you get this kind of demand, don't think about how to be compatible with IE6/7. First think about what attributes the text is centered vertically. Vertical-align:middle right, OK, naturally also contact the lovely inline-block.
The main code is as follows:
<body>
<div class= "box" >
<p class= "Text" >
Multi-line text unknown height vertical center-by A trace of multiple lines of text unknown height vertical center-by A trace of multiple lines of text unknown height vertical center-by a Trace
</p>
</div>
. box:before{
Content: ' I am the spare tire element ';
Display:inline-block;
Vertical-align:middle;
width:0;
height:100%;
}
. text{
Display:inline-block;
font-size:16px;
vertical-align:middle;/* ensure text is centered vertically.
}
Vertical-align alignment is required to have a reference, then the box container through the before to generate a height of 100% "spare tire", his height and the height of the container is consistent, relative to the "spare tire" vertically centered, the visual display is relative to the container vertical center. Let's try it together.
1. We can find that according to our thinking, word for line, this is swollen mody. Demo:
2. Don't worry, since "spare tire" occupies the position of the original text, that use margin negative try, Demo.
It's still not a good squeeze. Messy Bird ~
Remember "inline-block past and present life" in our said Inline-block elements will create gaps, is this goods in trouble.
3. Remember how to deal with voids before. font-size:0. Try
4. Vista, the world is harmonious, so as long as the last hidden before generated content can, please see the final Demo.
Finally, remember to remove the spare tire from the "content". Compatible with Ie8+,webkit,firefox,opera. (Don't ask me what's wrong with IE6, the most important idea)
Look at the animated presentation when height changes:
Admittedly, the above is a very Hack solution. In essence or should be by Flex to solve, in the face of such a demand, thinking is very important. About the CSS 3 alignment specification here "CSS Box alignment Module level 3".
Above
A
Reprint Please indicate the source: http://www.iyunlu.com/view/css-xhtml/77.html
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
