div图片垂直居中 如何使div中图片垂直居中
导读：收集整理的这篇文章主要介绍了div图片垂直居中 如何使div中图片垂直居中，觉得挺不错的，现在分享给大家，也给大家做个参考。 div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简...
收集整理的这篇文章主要介绍了div图片垂直居中 如何使div中图片垂直居中，觉得挺不错的，现在分享给大家，也给大家做个参考。 div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 中有这样一道题目：
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。
题目的难点在于两点：
1.垂直居中；
2.图片是个置换元素，有些特殊的特性。
至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：
复制代码代码如下:
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-Size: 175px; /*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial; /*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
div class="box">
img src="http://pics.taobao.COM/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
/div>
htML> head> style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px; /*约为高度的0.873，200*0.873 约为175*/ *font-family:Arial; /*防止非utf-8引起的hack失效问题，如gbk编码*/ width:200px; height:200px; border: 1px solid #eee; } .box img { /*设置图片垂直居中*/ vertical-align:middle; } /style> /head> body> div class="box"> img src="http://pics.taobao.com/bao/album/PRomotion/taoscars_180x95_071112_sr.jpg" _fcksavedurl="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> /div> /body>
ffcod = delpost.runcode25 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode25 .value = ffcod; 提示：您可以先修改部分代码再运行
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： div图片垂直居中 如何使div中图片垂直居中
本文地址： https://pptw.com/jishu/584839.html