Example 1
Uncertain height vertical center
| The code is as follows: |
Copy code |
/* 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 standard browser is the same as above. The difference is that for IE6/IE7, an empty label is inserted before the img label.
| The code is as follows: |
Copy code |
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> method 2-vertical center of images with unknown height </title>
<Style type = "text/css">
Body {
Height: 100%;
}
# 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">?
# Box I {
Display: inline-block;
Height: 100%;
Vertical-align: middle
}
# Box img {
Vertical-align: middle
}
</Style>
<! [Endif] -->
</Head>
<Body>
<Div id = "box">
<I> </I>
</Div>
</Body>
</Html> |
