Tip: You can modify some of the code before running
<?xml version= "1.0" encoding= "Utf-8"?> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "en" > <pead> <meta http-equiv= "Content-type" content= "Text/html; Charset=utf-8 "/> <title>demo:: Vertical align:middle</title> <meta lang=" en "name=" author "content= "Spenser Lee"/> <meta lang= "en" name= "copyright" content= "(c) 2006 Liberty Studio"/> <style media= "screen" Ty Pe= "Text/css" > html,body,div,h1,h2,pre,dd,ol{margin:0;padding:0;border:0} html{min-width:779px} body{ Background: #fff; color: #596480; text-align:center} div#main-wrapper{padding:12px 5px;width:769px;margin:0 Auto} Div, Code,p,h1,h2,address,dt,dd,li{font:normal 12px/1.5em Tahoma, "Lucida Grande", Helvetica,verdana,lucida,arial, "Arial Unicode ", Sans-serif,serif} h1{font-size:22px;font-weight:bold;border-left:12px solid #324f96; background: #e0eaf4; Color#4868a9; height:4em;line-height:4em;padding:0 12px;overflow:hidden; Text-align:left} h2{font-size:12px;font-weight:bold;background: #c0014e; color: #fff; Height:2.5em;line-height: 2.5em;padding:0 24px;overflow:hidden;margin:12px 0;text-align:left} h2 a{color: #fff; background:transparent} h2 A:hov Er{text-decoration:none} p{margin:6px 0;padding:0 12px 0 24px;text-indent:2em;text-align:left} P.snap-back{text-alig N:right} code{display:block;font-family: "Courier New", Courier, monospace, Mono, serif;margin:12px auto;padding:12px; border:1px solid #596480 color:inherit;background: #f6f6f6; text-align:left;white-space:pre;width:350px} strong{ Font-weight:bold} em{font-style:italic} address{display:block;padding:0 12px;margin:12px 0;text-align:right} Dl{mar gin:6px 0;padding:0 12px 0 24px;text-align:left} dt{margin:0;text-indent:2em;font-weight:bold} dd{margin-left:24px; TEXT-INDENT:2EM} li{list-style:square inside None;text-align:left} ol#table-of-content{pADDING-LEFT:24PX} a{color: #c0014e; Background:transparent;text-decoration:none} a:hover{text-decoration:underline div.demo{width:400px;margin:12px auto;border:1px solid #596480; Color:inherit;background: #ffc} div.demo P{text-alig n:left;margin:24px;text-indent:0} p#demo-1{margin:12px auto;padding:0 12px;width:400px;text-indent:0;border:1px so Lid #596480; Color:inherit;background: #ffc; Line-height:4em;height:4em;overflow:hidden} div#demo-2{padding:50px 0} Div#demo-4, div#demo-5{height:300px;position:relative} div#demo-4 Div, div#demo-5 div{position:absolute;top:50%; left:0} div#demo-4 p, div#demo-5 p{position:relative;top: -50%} div#demo-3{display:table;height:300px; Border-collapse:collapse} div#main-wrapper>div#demo-5{position:static;display:table} div#main-wrapper>div# Demo-5>div{display:table-cell;vertical-align:middle;position:static} Div#demo-3>div{display:table-row} div #demo -3>div>div{display:table-cell;vertical-align:middle} SPAN.Property{font-family: "Courier New", Courier, monospace, mono, serif;border-bottom:1px dotted #596480; background: #ffc; Color: #c0014e} p.copyright{line-height:3em;text-align:center;border-top:1px dotted #596480} </style> </ head> <body> <div id= "Main-wrapper" > <p>demo of middled vertical align</p> <address> Author:spenser Lee, Liberty studio<br/> Originally Posted on Blueidea Forum </address> <p>table of C entents:</p> <ol id= "table-of-content" > <li>single line countainer with/without a fixed height</ li> <li>align multi-line container which does not have a fixed height</li> <li>simulating table lay Out in container with a fixed height</li> <li>ie ' s solution</li> <li>a perfect compounded sample </li> </ol> <p>case one:single line Countainer with/without a fixed height</p> <p>if Only want to display a container whicH only holds a single line of text, can set <span class= ' property ' >line-height</span> property to <span Class= ' property ' >height</span> property, then set <span class= ' property ' >overflow</span> to hidden.</p> <p><strong>Sample:</strong></p> <p id= "demo-1" >lorem ipsum sit Amet, consectetuer adipiscing elit.</p> <p><strong>core code:</strong></p> <pre> <code>.middle-demo-1{Height:4em; Line-height:4em; Overflow:hidden; }</code></pre> <dl> <dt>Notes:</dt> <dd> <ol> <li>i strongly Recomm End with relative size in <span class= ' property ' >height</span> and <span class= ' property ' > Line-height</span> property. <em>Why?</em> you can simply set the font size larger if your browser support it. When it gets large enough, you'll be the Countainer is stretched and the <span ClasS= ' property ' >height</span> is no longer equal to <span class= ' property ' >line-height</span> property, thus, the layout are messed up. Using relative size as <span class= ' property ' >em, ex</span> or <span class= ' property ' >%</span> Would let your countainer stretch with the content.</li> <li><span class= "Property" >overflow:hidden&l T;/span> is a must. <em>Why?</em> Same as above. Just ensure <span class= ' property ' >height</span> and <span ' property ' class= > are always equal.</li> </ol> </dd> </dl> <dl> <dt>Pros:</dt> <dd> ; <ol> <li>fits in both <span class= ' property ' >block</span> elements and <span class= ' property ">inline</span> elements.</li> <li>capable of all 5th-gen browsers.</li> </ol> < /dd> </dl> <dl> <dt>Cons:</dt> <dd> <ol> <li>text length is limited. Max with I <em>one</em> line.</li> <li>does not work, "none text contents such as Imag Es and objects.</li> </ol> </dd> </dl> <p class= "Snap-back" >Back</p> <p>cas e two:align multi-line container which does not have a fixed height</p> <p>in this case, we should simply SE t a pair of fixed equivalences to padding-top and Padding-bottom attribute. It works on both IE and Non-ie browsers.</p> <p><strong>Sample:</strong></p> <div class = "Demo" id= "Demo-2" > <p>lorem ipsum dolor sit amet, consectetuer adipiscing. Maecenas dignissim diam eu sem proin nunc ante accumsan, sollicitudin at, sodales sed, semper. Etiam Orci. Vestibulum magna Lectus, venenatis nec, Tempus ac, dictum vel, lorem.</p> </div> <p><strong>core C Ode:</strong></p> <pre><code>.middle-demo-2{padding-top:24px; padding-bottom:24px; }</code></pre> <dl> <dt>Pros:</dt> <dd> <ol> <li>fits in both <s Pan class= "property" >block</span> elements and <span class= the "property" >inline</span> elements. </li> <li>works on none text contents as fine as text contents.</li> <li>capable of all 5th- Gen browsers. Might need a little tune-up for the box model bug of IE5 though.</li> </ol> </dd> </dl> <dl& Gt <dt>Cons:</dt> <dd> <ol> <li>you can <em>not</em> assign height in this so lution.</li> </ol> </dd> </dl> <p class= "Snap-back" >Back</p> <p>case Three : Simulating table layout in container with a fixed height</p> <P>CSS offers a set of very convenient display Atrribute values called <span class= "property" >display:table</span>, <span class= "property" >display:table-row</span>, <span class= the "property" >display: Table-cell</span> and other display values begin with <span class= the "property" >TABLE-</SPAN>. It offers a way to simulate table layout the all elements. As a result, the any element with <span class= "property" >display:table-cell</span>, <span class= "property" & Gt;vertical-align:middle</span> and a fixed height would display exactly like a table cell.</p> <p><s Trong>sample:</strong> (able to view the effect on IE) </p> <div class= "demo" id= "Demo-3" & Gt <div><div><p>lorem ipsum dolor sit amet, consectetuer adipiscing. Maecenas dignissim diam eu sem proin nunc ante accumsan, sollicitudin at, sodales sed, semper. Etiam Orci. Vestibulum magna Lectus, venenatis nec, Tempus ac, dictum vel, lorem.</p></div></div> </div> < P><strong>core Code:</strong></p> <pre><code>.middle-demo-3{Display:table-cell; height:300px; Vertical-align:middle; }</code></pre> <dl> <dt>Notes:</dt> <dd> <ol> <li><span class= "p Roperty ' >display:table-cell</span> must work with the other elements with <span class= ' property ' >display: Table</span> value sets in order to form a literal table. Or it might cause unexceptable bugs.</li> <li>sadly IE series (including the latest IE 7 Beta) does not sup Port any of the <span class= "property" >display:table</span> values, so it won ' t work in ie.</li> </ol& Gt </dd> </dl> <dl> <dt>Pros:</dt> <dd> <ol> <li>it has the most PERFE CT render for <span class= ' property ' >vertical-align:middle</span> align.</li> </ol> </DD&G T </dl> <dl> <dt>Cons:</dt> <dd> <ol&Gt <li>it latest versions of Non-ie browsers, such as Mozilla, Firefox, Netscape 8, Opera 8, and safari.& lt;/li> </ol> </dd> </dl> <p class= "Snap-back" >Back</p> <p>case four:ie ' s Solu Tion</p> <p>since IE is a lame browser as it comes to anything, so can ' t use the solution above Because IE does not recognize it in all. However, <strong>there has been nothing yet you can don't code with CSS if you have already coded it with table</st Rong>. It even offers you possibility to layout your page so tables can not do!</p> <p>so ' s The What for I E? Like what we always do:hit IE "s back with the BUGS it offers!</p> <p><strong>Sample:</strong> (Yo U are able to view the correct result only on IE) </p> <div class= "demo" id= "Demo-4" > <div><p>lore M ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, Accumsan Sollicitudin, sodales at, semper sed, ipsum. Etiam Orci. Vestibulum magna Lectus, venenatis nec, Tempus ac, dictum vel, lorem.</p></div> </div> <pre><c ode>.middle-demo-4{height:300px; position:relative; }. middle-demo-4 div{Position:absolute; top:50%; left:0; }. middle-demo-4 Div div{position:relative; Top:-50%; left:0; }</code></pre> <p>see? Don T ask me why it worked. This is based on years of study in IE ' s own stupid layout model and it works very the the box even the IE5 th hack. I won ' t tell you the theory behind. It's my top secret, with which I solved a lot of other cross browser layout problems, and I ' m not going to share it with Y Ou. But you are free to use this IE hack It's kinda handful in most occassions.</p> <dl> <DT>PROS:</DT&G T <dd> <ol> <li>the only perfect vertical align to IE. It Works even betterThen add automatic <span class= "property" >padding</span>s.</li> </ol> </dd> </dl> <dl> <dt>Cons:</dt> <dd> <ol> <li>after All it ' s a CSS hack. We can avoid it if not for ie.</li> </ol> </dd> </dl> <p class= "Snap-back" >Back</p> <p>case five:a Perfect compounded sample</p> <p>here ' s perfect compounded-solution on vertical C Entering the almost all latest browsers.</p> <p><strong>Sample:</strong> Almost all browsers) </p> <div class= "demo" id= "demo-5" > <div><p>lorem ipsum dolor sit amet, cons Ectetuer adipiscing elit. Maecenas dignissim diam eu sem proin nunc ante accumsan, sollicitudin at, sodales sed, semper. Etiam Orci. Vestibulum magna Lectus, venenatis nec, Tempus ac, dictum vel, lorem.</p></div> </div> <p>i ' m not Going to give you the fulL Code of this one. But it ' s not difficult to write it yourself, with the solution of case 3 and 4, and a little knowledge in Ie/non-ie CSS ha Ckers. And actually the hacking style isn't limited, so I don ' t want to force your to with my hacking style neither. Stop being lazy, and write the code yourself!</p> <dl> <dt>browser capability:</dt> <dd> <ol> <li>works on:ie6+, Mozilla 1.5+, Netscape Navigator 7+, Opera 7+, Firefox 1.0+ and Safari 1.0+</l I> <li>on IE5, you might need to apply the box model hacker to make the height correct.</li> <LI&G T Untested:webomini, konqueror.</li> <li>fails on:other browsers not reffered in the list above.</li> </ol> </dd> </dl> <p class= "Snap-back" >Back</p> <p class= "Copyright" >copyright©s Penser Lee, 2006 Liberty studio</p> </div> </body> </ptml>
Tip: You can modify some of the code before running
