完美绝对居中怎么不局中？？？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>完美居中</title>
<style type="text/css">
html * {padding:0; margin:0;}
ul, ol,ul li,ol li{padding:0; margin:0; list-style:none;}
img{border:none;}
object{visibility:visible !important; }
body {font-family:"宋体", Geneva, Arial, Helvetica, sans-serif; font-size:12px; background-color:#FFF;}
.clearfloat{clear:both; height:0; overflow:hidden; margin-bottom:3px;}
a{text-decoration:none; outline:none; star:expression(this.onFocus=this.blur());}
.wrap{display:table;width:340px; height:120px;border:1px solid #BDBDBB;_position:relative;overflow:hidden; margin-bottom:6px; margin-top:6px;}
.wrapin{vertical-align:middle;display:table-cell;_position:absolute;_top:50%;}
.rec_content{_position:relative;_top:-50%;}
.rec_content li{ line-height:24px; line-height:24px;}
.rec_content li img{ float:left; display:inline; margin-top:5px; margin-left:5px; margin-right:5px;}
.rec_content li a{ color:#5BA4CF}
</style>
</head><body>
<div class="wrap">
     <div class="wrapin">
         <div class="rec_content">
            <ul>
             <li><img src="../Skin/Basic/Images/preLesson/ppt.jpg" width="16" height="16" /><a href="#">传输设备工程施工安全生产操作规程（XLH）.doc</a></li>
                <li><img src="../Skin/Basic/Images/preLesson/swf.jpg" width="16" height="16" /><a href="#">传输设备工程施工安全生产操作规程（XLH）.doc</a></li>
                <li><img src="../Skin/Basic/Images/preLesson/wovs.jpg" width="16" height="16" /><a href="#">传输设备工程施工安全生产操作规程（XLH）.doc</a></li>
            
            </ul>
            </div>
        </div>
    </div>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>完美居中</title>
    <style type="text/css">
    body {padding:0; margin:0 auto;text-align:center;}
    ul, ol,ul li,ol li{padding:0; margin:0; list-style:none;}
    img{border:none;}
    object{visibility:visible !important; }
    body {font-family:"宋体", Geneva, Arial, Helvetica, sans-serif; font-size:12px; background-color:#FFF;}
    .clearfloat{clear:both; height:0; overflow:hidden; margin-bottom:3px;}
    a{text-decoration:none; outline:none; star:expression(this.onFocus=this.blur());}
    .wrap{text-align:left;display:table;width:340px; height:120px;border:1px solid #BDBDBB;_position:relative;overflow:hidden; margin-bottom:6px; margin-top:6px;}
    .wrapin{vertical-align:middle;display:table-cell;_position:absolute;_top:50%;}
    .rec_content{_position:relative;_top:-50%;}
    .rec_content li{ line-height:24px; line-height:24px;}
    .rec_content li img{ float:left; display:inline; margin-top:5px; margin-left:5px; margin-right:5px;}
    .rec_content li a{ color:#5BA4CF}
    </style>
    </head><body>
    <div class="wrap">
      <div class="wrapin">
      <div class="rec_content">
      <ul>
      <li><img src="../Skin/Basic/Images/preLesson/ppt.jpg" width="16" height="16" /><a href="#">传输设备工程施工安全生产操作规程（XLH）.doc</a></li>
      <li><img src="../Skin/Basic/Images/preLesson/swf.jpg" width="16" height="16" /><a href="#">传输设备工程施工安全生产操作规程（XLH）.doc</a></li>
      <li><img src="../Skin/Basic/Images/preLesson/wovs.jpg" width="16" height="16" /><a href="#">传输设备工程施工安全生产操作规程（XLH）.doc</a></li>
       
      </ul>
      </div>
      </div>
      </div>
    </body>
    </html>