conditions for vertical alignment that are not known height :
The first one is better understood, and a second many people may overlook it. For example, many people in the picture and text in a row when you want to make the picture vertically relative to the text in addition to using IE private characteristics valign= "Absmiddle" There is no other way. Remember, the default image is Inline-block, you just need to simply img {vertical-align:middle} Can.
So, let's go to the subject. Now we want to achieve vertical centering because of some special needs of two side Div. As mentioned earlier, Div is not a table, but in contemporary browsers except IE all support Display:table-cell. Exactly, IE support Dispaly:inline-block, then we are in two ways for contemporary browsers to achieve the vertical center of the table, the same way.
HTML is as follows:
blah blah...
CSS is as follows:
#div1, #div2 {display:table-cell; *display:inline; zoom:1; vertical-align:middle;}
Let's focus on analyzing CSS. As you know, *property is a hack that only IE (including IE7) can parse. So why inline instead of Inline-block? This is related to IE's abnormal working methods, specifically not to delve into. All you need to know here is to add zoom:1, which is equivalent to Inline-block. In addition, if it is a, span, and other non block elements, it is display:inline-block in the normal way.
Example :
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "lang=" en "xml:lang=" en "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><meta name=" developer content= "Realazy"/><title> unknown height, div vertically centered across a browser scheme </title ><style type= "text/css" media= "screen" >/* <! [cdata[* * #div1, #div2 {display:table-cell; *display:inline; zoom:1; vertical-align:middle;} #div1 {color:red;} /*]]> */</style></head><body><p> Unknown height,<code>div</code> vertically centered in a cross-browser scenario </ H1><p> returns <A vertical alignment of href= "http://www.blueidea.com/tech/web/2007/4629.asp" > Unknown height </a></p ><div id= "BD" ><div id= "div1" >blah blah ... Did you see me centered? </div><div id= "Div2" ><p>blah blah...</p><p>blah blah...</p><p>blah blah ... </p><p>blah Blah...</p><p>blah Blah...</p><p>blah Blah...</p><p>blah Blah...</p><p>blah blah...</p> <p>blah Blah...</p><p>blah Blah...</p><p>blah blah...</p><p>blah blah ... </p><p>blah Blah...</p><p>blah Blah...</p><p>blah Blah...</p></div ></div></body></html>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
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
