Rainshadow StudioRainshadow StudioRainshadow StudioRainshadow Studio
  • Home
  • Photography
  • Design
  • Techniques
    • Photography Techniques
    • Design Techniques
  • Others

未知高度的图片垂直居中

    Home 设计工作站 设计技巧 未知高度的图片垂直居中
    NextPrevious

    未知高度的图片垂直居中

    By rainshadow | 设计技巧 | 0 comment | 13 6月, 2012 | 0

    图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项目可能会用到这个方案,所以把一些常用的方法都收集整理了一下。

    下图是理想中的效果图,外部容器的宽度和高度是固定的,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。

    但是实际中实现的效果并不是很完美,由于各浏览器的解析都各不相同,所以各浏览器都会有1px-3px的偏差。

    该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。

    HTML结构部分:

    <div id="box">
      <img src="images/demo.jpg" alt="" />
    </div>

    CSS样式部分:

    <!-- [if lte IE 7]>
    <style type="text/css">
    #box{
    position:relative;
    overflow:hidden;
    }
    #box span{
    position:absolute;
    left:50%;top:50%;
    }
    #box img{
    position:relative;
    left:-50%;top:-50%;
    }
    </style>
    
    < ![endif]-->
    code ,html

    rainshadow

    More posts by rainshadow

    Related Post

    • 如何将页脚固定在页面底部

      By rainshadow | 0 comment

      作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当Read more

    • Adobe Edge Reflow CC 响应式网页设计

      By rainshadow | 0 comment

      响应式网页设计基础【从零开始】 如今的互联网事业突飞猛进,可谓一日千里Read more

    • 移动平台自动跳转到移动版网页

      By rainshadow | 0 comment

      原先网站是flash制作的首页,随着进入移动互联网时代,移动客户端几乎Read more

    • 做站必备神图

      By rainshadow | 0 comment

    • Quirks模式与Standards模式的区别

      By rainshadow | 0 comment

      quirks和standards的区别很多都可以归为IE5和IE6的区Read more

    Leave a Comment

    取消回复

    您的电子邮箱地址不会被公开。 必填项已用*标注

    NextPrevious

    标签

    Adobe ai app apple BBC CIVIC code css dreamweaver excel Flash Google Gphone HD html ipad jequery js office ppt Premiere PS PS3 TV UI wordpress 上海 吃吃喝喝 奥运 婚礼 小常识 幽默 手机 报价 摄影 摄影技巧 汽车 流行 电影 电脑 网站 视频 设计 软件 音乐
    Copyright 2017 Rainshadow Studio | All Rights Reserved
    • Home
    • Photography
    • Design
    • Techniques
      • Photography Techniques
      • Design Techniques
    • Others
    Rainshadow Studio