`
royzhou1985
  • 浏览: 250195 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

CSS图片垂直居中方法

    博客分类：
  • CSS
CSSXHTMLHTML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!-- 
* {margin:0;padding:0}
div {
   width:500px;
   height:500px;
   border:1px solid #ccc;
   overflow:hidden;
   position:relative;
   display:table-cell;
   text-align:center;
   vertical-align:middle;
   background:#cccccc;
   }
div p {
   position:static;
   +position:absolute;
   top:50%
   }
img {
   position:static;
   +position:relative;
   top:-50%;left:-50%;
   width:276px;
   height:110px
   }
-->
</style>
<div><p><img src="" /></p></div>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
* {margin:0;padding:0;}
div {
    width:500px;text-align:center;border:1px solid #f00;line-height:500px;
    height:500px;font-size:500px
    }
*>div{
    font-size:12px
    }
div img {
    vertical-align:middle
    }
</style>
<div>
<img src="" width="400" height="400"/> 
</div>

分享到：
| 客户端获取上传文件的大小
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics