Html5 div中图片垂直居中 如何使div中图片垂直居中

2023-08-21 1068

Html5 div中图片垂直居中 如何使div中图片垂直居中。

代码片段:

  1. <style type="text/css">

  2.     div {

  3.         displaytable-cell;

  4.         vertical-alignmiddle;

  5.         text-aligncenter;

  6.         width100px;

  7.         height100px;

  8.         border1px solid #eee;

  9.     }

  10.     div > img {

  11.         vertical-alignmiddle;

  12.     }


div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法:

在曾经的 淘宝UED 招聘 中有这样一道题目:

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。

题目的难点在于两点:

1.垂直居中;

2.图片是个置换元素,有些特殊的特性。

至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:

  1. .box {

  2. /*非IE的主流浏览器识别的垂直居中的方法*/

  3. displaytable-cell;

  4. vertical-align:middle;

  5. /*设置水平居中*/

  6. text-align:center;

  7. /* 针对IE的Hack */

  8. *displayblock;

  9. *font-size175px;/*约为高度的0.873,200*0.873 约为175*/

  10. *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/

  11. width:200px;

  12. height:200px;

  13. border1px solid #eee;

  14. }

  15. .box img {

  16. /*设置图片垂直居中*/

  17. vertical-align:middle;

  18. }

  19. <div class="box">

  20. <img src="http://pics.taobao.com/bao/alb ... ot%3B />



  1. <html><head>

  2. <style>

  3. .box {

  4. /*非IE的主流浏览器识别的垂直居中的方法*/

  5. displaytable-cell;

  6. vertical-align:middle;

  7. /*设置水平居中*/

  8. text-align:center;

  9. /* 针对IE的Hack */

  10. *displayblock;

  11. *font-size175px;/*约为高度的0.873,200*0.873 约为175*/

  12. *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/

  13. width:200px;

  14. height:200px;

  15. border1px solid #eee;

  16. }

  17. .box img {

  18. /*设置图片垂直居中*/

  19. vertical-align:middle;

  20. }</style>

  21. </head>

  22. <body>

  23. <div class="box">

  24. <img src="http://pics.taobao.com/bao/alb ... ot%3B _fcksavedurl="http://pics.taobao.com/bao/alb ... ot%3B />

  25. </div>

  26. </body>


最近面试很多做前端的,谈到div垂直居中很多人写不出来,其实不是CSS掌握不牢,最重要的是垂直居中没有解决思路,所以这里分享一下给需要的朋友们借鉴。

以上就是Html5 div中图片垂直居中 如何使div中图片垂直居中的详细内容,更多请关注php知识-学习天地 www.lxywzjs.com其它相关文章!

分享至:

分享到QQ空间 分享到朋友社区 新浪微博分享

栏目地图