<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } img{ border: 0; } body{ background-color: #fff; } /*........................当包裹中有inline-block的东西时，包裹font-size设置为0.................*/ .list{ list-style: none; overflow: hidden; } .list li{ width: 200px; height: 200px; border: 1px solid #333; margin: 10px; float: left; text-align: center; } /*ie7以上*/ .list .item1{ line-height: 200px; font-size: 0; } .list .item1 img{ vertical-align: middle; } /*after伪类*/ .list .item2{ line-height: 200px; font-size: 0; } .list .item2:after{ content: "."; } .list .item2 img{ vertical-align: middle; } /*空格 */ .list .item3{ line-height: 200px; font-size: 0; } .list .item3 img{ vertical-align: middle; } /*空标签或空图片兼容ie6*/ .list .item4{ line-height: 200px; font-size: 0; } .list .item4 span{ display: inline-block; width: 0; height: 100%; vertical-align: middle; } .list .item4 img{ vertical-align: middle; } /*透明图片+背景兼容ie6*/ .list .item5 img{ width: 100%; height: 100%; } /*淘宝的解决方案display:table-cell;兼容ie6*/ /*当有display:table-cell;时不能浮动，当需要浮动时解决办法为外层多套一个div*/ .taobao{ position: relative; left: 10px; width: 200px; height: 200px; border: 1px solid #333; display: table-cell; text-align: center; vertical-align: middle; float: none; font-size: 0; *display: block; *font-size:175px; *font-family: Arial; } .taobao img{ vertical-align: middle; } </style> </head> <body> <ul class="list"> <li class="item1"><img src="head.png" height="100" width="100" alt=""></li> <li class="item2"><img src="head.png" height="100" width="100" alt=""></li> <li class="item3"><img src="head.png" height="100" width="100" alt=""> </li> <li class="item4"><img src="head.png" height="100" width="100" alt=""><span></span></li> <li class="item5"><img src="bg.gif" style="background:url(head.png) no-repeat center center" alt=""></li> </ul> <div class="taobao"><img src="head.png" height="100" width="100" alt=""></div> </body> </html>