<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<title> Image Auto Vertical Center </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
<!--
Ul#fgwrap{width:936px;margin:0 Auto;list-style:none;padding-top:2em;}
Ul#fgwrap li{float:left; margin:0 10px 10px 0;background: #EEE}
. boxinner{
height:160px;
width:200px;
Border:solid 1px #666;
Text-align:center;
Display:table-cell;
Vertical-align:middle;
}
. boxinner img {margin:0 auto;border:4px solid #FFF;}
-
</style>
<style type= "Text/css" >
/* Vertical Center under IE */
. edge {width:0; height:100%; display:inline-block; vertical-align:middle;}
. container {text-align:center; width:100%; display:inline-block; vertical-align:middle;line-height:80%;}
/* Plus line-height:80% is mainly to eliminate in the Ie-firefox-chrome three browser images of the white space, so that the picture around the width of the same */
</style>
<body>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
<div id= "Forestganmiddle" >
<ul id= "Fgwrap" >
<li>
<div class= "Boxinner" ><span class= "Edge" ></span><span class= "container" ></span></div>
</li>
<li>
<div class= "Boxinner" ><span class= "Edge" ></span><span class= "container" ></span></div>
</li>
</ul>
</div>
</body>
Automatic horizontal and vertical centering method for unknown picture size
