Web Standard Learning: Non-tabular vertical alignment of unknown heights

Source: Internet
Author: User
Web|web Standard

conditions for vertical alignment that are not known height :

    • Table cells
    • Inline block (inline-block)

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 ... Did you see me centered?

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]

Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.