div中img水平垂直居中

直接上html代码：

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 6         <title>图片在div中[垂直和水平]居中</title>
 7         <style type="text/css">
 8             * {
 9                 margin: 0px;
10                 padding:0px;
11             }
12             html,body {
13                 width: 100%;
14                 height: 100%;
15             }
16             .main {
17                 width: 800px;
18                 height: 600px;
19                 border: solid 1px #223344;
20             }
21         </style>
22     </head>
23     <body>
24         <div class="main">
25             <table width="100%" height="100%">
26                 <tr align="center" valign="middle">
27                     <td><img src="images/m1.png"/></td>
28                 </tr>
29             </table>
30         </div>
31     </body>
32 </html>

 

是不是垂直水平居中了，看起来舒服很多了。

posted on 2013-09-25 10:53  zenger1025  阅读(247)  评论(0)    收藏  举报

导航