• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    未知大小图片在已知容器中的垂直和水平居中问题

    除特别说明外,本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果。

    CSS布局中,未知大小图片的垂直居中,一直是比较头疼的问题,标准浏览器只要设定容器的line-height和图片的vertical-align:middle;就可以了,但对IE没用,几个月前在国外网站看到了一则对IE的解决方法,感觉不是很理想,也没当回事。最近看到经常有朋友在问类似的问题,又把代码翻了出来,针对IE改了下。

    CSS

     .box{
      height:140px;
      width:200px;
      border: solid 1px #666;
      text-align:center;/*水平居中*/
      line-height:140px;
      font-size:126px;/*IE靠这垂直居中*/  
     }
     .box[class]{
      font-size:12px;/*标准浏览器需要这个数值*/
     }
     img{
      vertical-align:middle;/*标准浏览器图片垂直居中*/
     }

    原先老外代码的font-size是和高度相同,试下来容器的高度要比标准浏览器高一截,多次尝试将字体尺寸大小减去了百分之十容器的高度,这样一来,看起来差不多。至于什么原因还不清楚.

    在IE5.5、IE6.0、FF1.5、Opera9.0下测试成功,对IE5.0和IE7.0无效.

    您可能感兴趣的文章:
    • iOS - UIButton(UIEdgeInsets)/设置button上的文字和图片上下垂直居中对齐
    • CSS图片响应式 垂直水平居中
    • js+CSS 图片等比缩小并垂直居中实现代码
    • javascript图片自动缩放和垂直居中处理函数
    • 用css实现图片垂直居中的使用技巧
    • 文字或图片元素在DIV中垂直居中
    • JS实现图片垂直居中显示小结
    上一篇:CSS解决未知高度垂直居中的问题
    下一篇:在DIV+CSS排版中新闻列表的制作方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    未知大小图片在已知容器中的垂直和水平居中问题 未知,大小,图片,在,已知,