在使用display：table-cell實(shí)現(xiàn)不定大小圖片水平垂直居中，但是在實(shí)現(xiàn)的過(guò)程中，自己發(fā)現(xiàn)了一個(gè)問(wèn)題就是，如果圖片的 寬：高>1 同時(shí) 圖片的原始大小寬度大于容器的寬度時(shí)，在ie8中就會(huì)出現(xiàn)下圖的效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display</title> <style>div{width: 200px;height: 200px;border:1px solid black;float: left;margin-left: 200px;}a{width: 200px;height: 200px;display: table-cell;vertical-align: middle;text-align: center; border:1px dashed red;}img{max-width: 200px;max-height: 200px;vertical-align: middle; border:none;} </style> </head> <body> <!--圖片328x220有問(wèn)題--> <div> <a href="#"> <img src="11.jpg" alt=""> </a> </div> <!-- 圖片720x1280 沒(méi)問(wèn)題--> <div> <a href="#"> <img src="22.jpg" alt=""> </a> </div> <!-- 圖片200x150 沒(méi)問(wèn)題--> <div> <a href="#"> <img src="44.jpg" alt=""> </a> </div> </body> </html>
加載中...