See a lot of ask this question, so take a moment to tidy up, welcome everyone to make suggestions, do additional changes, thank you!
/*lesliezmz collation method 2010-01-19*/
When Writing-mode is TB-RL, the document flow is written from top to bottom, right to left. You can then set the Text-align:center to center in the vertical direction. It's a little trick.
Original link: IE6 with Writing-mode to implement the unknown height substitution element is centered vertically.
<textarea name= "runcode0" cols= "rows=" "Courier New ', Courier,monospace" height:240px "><!" 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 "> <pead> <title> using positioning to display the picture of the vertical bureau </title> < Style type= "Text/css" > Miao {width:500px; height:220px; line-height:220px; BORDER:1PX solid; Text-align:center; }. Miao img {vertical-align:middle; } </style> <!--[if IE 6]> <style type= "Text/css" >. Miao span {border:1px solid red; height:100%; * * To ensure that the same height as the parent element of the line * * * WRITING-MODE:TB-RL; Vertical-align:middle; } </style> <! [endif]--> </pead> <body> <p> Fixed high width container, picture vertical board. </p> <p> use of absolute positioning and relative positioning methods </p> <div class= "Miao" > <span></span> you know too much, you know too much, you know.More </div> <pr/> <div class= "Miao" > <span></span> you know too much, you know too much, you know too much. </div> <pr/> <div class= "Miao" > <s Pan></span> you know too much. </div> </body> </ptml> </textarea>
Tip: You can modify some of the code before running /*lesliezmz paste End * *
/*yoom paste start 2010-01-18*/
Since OPERA,FF3,IE8 supports Display:talbe, these features have been improved by:
<textarea name= "Runcode1" cols= "rows=", "Courier New ', Courier,monospace" height:203px "><!" 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 "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> use positioning to display images in vertical Bureau </title> <style type=" Text/css "> miao{width:170px; Height:100px;display:table;text-align:center;border:solid 1px red; . Miao span{display:table-cell;vertical-align:middle;border:solid 1px blue; . Miao span img{border:dashed 1px green; </style> <!--[if LTE IE 7]> <style type= "Text/css" > Miao{pos Ition:relative;overflow:hidden;} . Miao span{position:absolute;left:50%;top:50%; Miao span img{position:relative;left:-50%;top:-50%;} </style > <! [endif]--> </pead> <body> <p> Fixed high width container, picture vertical board. </p> <p> Green container is span, the aim is to make your own upper left corner with the container center point pairQi. Red is a specific picture, set the negative again so that their center point and the center of the parent container overlap, and eventually achieve the purpose of the vertical bureau. </p> <div class= "Miao" > <span></span> </div> <pr/> <div class=" Miao "style=" width:300px;height:80px; > <span></span> </ div> <pr/> <div class= "Miao" style= "width:500px;height:220px"; > <span></span> </div> </body> </ptml> </textarea>
Tip: You can modify some of the code before running
If you don't like conditional annotations, you can put your code together in a CSS hack way.
Link to the original post:
unknown high-wide picture vertical Board
/*yoom Paste End * *
<textarea name="runcode2" cols="78" rows="11" courier="" new',courier,monospace;="" height:="" 194px"=""><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <style type=" text/css "> <!--* {margin:0;padding:0} div {width:500px; height:500px; border:1px solid #ccc; Overflow:hidden; position:relative; Display:table-cell; Text-align:center; Vertical-align:middle} div p {position:static; +position:absolute; top:50%} img {position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px}--> </style> <div><p></p></div></textarea>
Tip: You can modify some of the code before running
Alternative methods in standard browsers:
<textarea name="runcode3" cols="78" rows="12" courier="" new',courier,monospace;="" height:="" 202px"=""><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <style type=" text/css "> <!--body {margin:0;padding:0} div {width:500px; height:500px; line-height:500px; border:1px solid #ccc; Overflow:hidden; position:relative; Text-align:center; Margin:auto} div p {position:static; +position:absolute; top:50%} img {position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px; Vertical-align:middle} p:after {content: "."; font-size:1px; Visibility:hidden}--> </style> <div><p></p></div></textarea>
Tip: You can modify some of the code before running
Standard browser Strict type declaration:
<textarea name="runcode4" cols="78" rows="11" courier="" new',courier,monospace;="" height:="" 196px"=""><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < Style type= "Text/css" > <!--* {margin:0;padding:0} div {width:500px; height:500px; line-height:500px; border:1px solid #ccc; Overflow:hidden; position:relative; Text-align:center; } div p {position:static; +position:absolute; top:50%; Vertical-align:middle} img {position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px; Vertical-align:middle}--> </style> <div><p></p></div></textarea>
Tip: You can modify some of the code before running
Use the font size method:
<textarea name="runcode5" cols="79" rows="12" courier="" new',courier,monospace;="" height:="" 199px"=""><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < Style type= "Text/css" > * {margin:0;padding:0} div {width:500px;text-align:center;border:1px solid #f00; Line-heigh t:500px; height:500px;font-size:500px} *>div{font-size:12px} div img {vertical-align:middle} </style> <DIV&G T </div></textarea>
Tip: You can modify some of the code before running
Display:inline-block method
<textarea name="runcode6" cols="78" rows="11" courier="" new',courier,monospace;="" height:="" 196px"=""><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < Style type= "Text/css" > div {display:table-cell; height:300px; width:500px; Text-align:center; border:1px solid #000; Vertical-align:middle} </style> <!--[if ie]> <style type= "Text/css" > I {display:inline-block; height:100%; Vertical-align:middle} img {vertical-align:middle} </style> <! [endif]--> <div> <i></i> </div ></textarea>
Tip: You can modify some of the code before running
The simplest of course is the method of background image pulling.
<textarea name="runcode7" cols="78" rows="11" courier="" new',courier,monospace;="" height:="" 195px"=""><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < Style type= "Text/css" > * {margin:0;padding:0} div {width:500px;border:1px solid #f00; height:500px; Background:url ("http://www.google.com/intl/en/images/logo.gif") Center No-repeat} </style> <div> </ Div></textarea>
Tip: You can modify some of the code before running
