欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

图像在div 内垂直居中 绝对ok 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)

shiping1 的头像

一个问题一直困扰着不少前端制作人员(也称前端开发工程师,o(∩_∩)o)。如题,如何实现一张未知宽高的图片在一个Div里面水平垂直 居中呢?相信部分前端Sir首先想的是Table布局,是的,实现起来不是很麻烦,但肯定也有和浩子一样有代码洁癖的人。在这里,浩子忽略Table的实 现方法,有兴趣的也可以去研究一下。下面介绍下用Html和CSS来实现如题效果。

先看看Demo效果:纯CSS实现图片水平垂直居中于DIV(图片未知宽高)

PS:你可以用Firebug或者任意浏览器的开发人员工具修改图片尺寸,测试测试效果。(任何关于本文的问题请留言

再看看代码,主要2部分:

HTML代码:

<div class=”demo”><a href=“#”><img src=“images/01.jpg” /></a></div>

CSS代码:

/*For Firefox Chrome*/
.demo{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}
.demo a{display:table-cell;vertical-align:middle;width:200px;height:140px;}
.demo a img{border:1px #ddd solid;margin:0 auto;max-width:200px;max-height:140px;}
/*For IE7*/
*+html .demo a{position:absolute;top:50%;width:100%;text-align:center;height:auto;}
*+html .demo a img{position:relative;top:-50%;left:-50%;}
/*For IE6*/
*html .demo a{position:absolute;top:51%;width:100%;text-align:center;height:auto;display:block;}
*html .demo a img{position:relative;top:-50%;left:-50%;width:expression(this.width>200?“200px”:“auto”);height:expression(this.height>140?“140px”:“auto”);}

其中For IE6中的css有这么一段:

width:expression(this.width>200?“200px”:“auto”);height:expression(this.height>140?“140px”:“auto”);

这是限制IE6下图片的最大宽和最大高,就像非IE6下的:

max-width:200px;max-height:140px;

是一个道理。

其他也没什么要过多解释的了,你懂的!如果你对部分CSS不太懂的话,请参考大前端的HTML+CSS一栏,或者前往w3school。

转载请注明:大前端 » 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)

与本文相关文章

发表我的评论

表情 插代码

网友评论17

  1. width:expression(this.width>200?“200px”:“auto”);height:expression(this.height>140?“140px”:“auto”);这个会大大影响页面的速度

    guiguzi832012-12-25 15:43 回复
  2. Howdy, i read your blog from time to time and i own a similar one and i was just wondering if you get a lot of spam remarks? If so how do you prevent it, any plugin or anything you can suggest? I get so much lately it’s driving me insane so any assistance is very much appreciated.

  3. 没什么了,兼容性不错!!

    路人2012-03-09 14:20 回复
  4. 还有博主请问这个评论插件的name是?

    前端组2012-03-07 11:34 回复
  5. 我就有点不明白了,为什么IE7是50%,而IE6是51%?

    前端组2012-03-07 11:33 回复
  6. 贴上我的代码
    .pic { bottom:0; right:0; width:90px; height:90px; text-align:center;}
    .pic a{ display:table-cell; width:90px; height:90px; outline:medium none; font-size:78px; line-height:78px; vertical-align:middle; text-align:center;}
    .pic img { max-height:90px; _height:expression((documentElement.clientHeight >90) ? “90px” : “auto” ); margin:0 auto; vertical-align:middle;}

    有问题发邮件哦

    kavon2011-12-29 10:11 回复
  7. :lol: 不错

    顾小北2011-12-05 12:24 回复
  8. .box {
    /*非IE的主流浏览器识别的垂直居中的方法*/
    display: table-cell;
    vertical-align:middle;
    /*设置水平居中*/
    text-align:center;
    /* 针对IE的Hack */
    *display: block;
    *font-size: 73px;/*这个值大概为最大高度的0.875*/
    *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
    width:200px;
    height:84px;
    }
    .box img {
    /*设置图片垂直居中*/
    vertical-align:middle;
    /*非IE6下的等比缩放*/
    max-height:84px;
    max-width:200px;
    /*IE6下的等比缩放,注意expression其实是运行了一个JS程序,所以如果图片很多的话会引起CPU占用率高*/
    width:expression(this.width >200 && this.height 84 && this.width <= this.height ? 84 : true);
    }

    threeman2011-12-05 10:15 回复
  9. 这篇太好啦,对我太有用啦, :mrgreen:

    jacky2011-05-05 13:29 回复
  10. 居中,我个人习惯放作背景 如:=========== 

    php-小陳2011-01-17 10:48 回复
    • 单个样式可以用作背景,批量的数据呢

      浩子2011-01-17 15:21 回复
  11. 当relative作为postion时,那个top和left的百分比是以自身为基准吗?还是继续父容器?学习了。。以前没怎么注意。

    菜心2011-01-05 11:54 回复
    • postion主要是父与子的关系:
      父为relative时,子就继承了父

      浩子2011-01-05 12:42 回复
  12. :oops: 我有个方法,拿出来大家讨论下,!~ 让图片的容容器{display:table;}图片{vertical-align:middle} 我现在一直在用,兼容性,也可以!~

    水墨寒2011-01-04 10:06 回复
    • 刚刚试过,这个方法好像不行

      浩子2011-01-04 10:10 回复
  13. 不错不错,学习了。

    树人2011-01-04 10:01 回复

 

普通分类: