一个简洁的图片垂直居中,不需要hack,不需要table-cell

废话不多说 上代码

HTML结构

 <div id="imgwrap">
       <img src="http://jiedemo.sinaapp.com/img/240.jpg">
       <span></span>
    </div>

CSS

 

   #imgwrap{ 
       width:300px;
       height:400px;
       background:#f00;
       line-height: 400px;
       text-align: center;
   }
   #imgwrap img {vertical-align: middle;}
   #imgwrap span{ display:inline-block;}

 

点击这里查看DEMO

以上是hasylayout官网给出的解决方案 原文:http://haslayout.net/css/No-line-height-Vertical-Center-on-Images-Bug

posted @ 2012-07-04 15:18  JieLee  阅读(674)  评论(4编辑  收藏  举报
登录 发表评论 返回顶部