Example 1
Indeterminate height vertically Centered
| The code is as follows |
|
|
/* Center < *
. vetically {
Vertical-align:middle;
Display:table-cell;
*position:relative;
}
. vetically_c {
Display:block;
margin:0 Auto;
Text-align:center;
*position:absolute;
*top:50%;
*left:50%;
*margin-top:expression (-(This.height)/2);
*margin-left:expression (-(This.width)/2);
}
/* Center > * |
Example 2
The same is the case with standard browsers, and the difference is that IE6/IE7 uses a pair of empty tags in front of the IMG tag.
| code is as follows |
&nbs P; |
|
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312"/>&NBSP;
<title > method 2-unknown height picture vertically centered </title>
<style type= "Text/css" >&NBSP;
Body {
height:100%; &NBSP
}
#box {
width:500px;height:400px;
display:table-cell;
Text-align : center;
vertical-align:middle;
border:1px solid #d3d3d3; background: #fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if ie]>
<style type= "Text/css" >?&NBSP;
#box i {
display:inline-block;
height:100%;
VERTICAL-ALIGN:MIDDLE&NBSP
}
#box img {
vertical-align:middle
}
</style>
<![ ENDIF]-->&NBSP
<body>
<div id= "box" >&NBSP;
<i></ I>&NBSP;
</div>
</body>
</ Html> |
