图片居中

图片居中

 1 <!doctype html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>图片在容器内，水平垂直居中</title>
 6     <style>
 7         .box{width:100px;height:100px;border:1px solid #000; text-align:center;}
 8         span{display:inline-block;height:100%;vertical-align:middle;}
 9         img{vertical-align:middle;}
10     </style>
11     </head>
12 <body>
13     <div class="box">  
14         <img src="http://www.zhinengshe.com/images/logo.png" alt="智能社"/><span></span>
15     </div>
16 </body>
17 </html>

 

posted @ 2013-11-08 14:40  远方的远方  阅读(144)  评论(0)  编辑  收藏  举报