图片上下居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯css实现div容器内图片上下左右居中效果</title> <style type="text/css"> *{ margin:0; padding:0; list-style:none;} img{ border:none;}</p><p>.main{ width:600px; height:400px; margin:100px auto;text-align:center;vertical-align:middle;display:block;position:relative; background:#ddd;} .main a{display:table-cell;vertical-align:middle;width:600px; height:400px; } .main a img{max-width:600px;max-height:400px; } </style> </head></p><p><body> <div class="main"> <img src="<a href="http://files.jb51.net/file_images/article/201401/2014010513525079.jpg">http://files.jb51.net/file_images/article/201401/2014010513525079.jpg</a>" /> </div> </body> </html> 兼容IE8，火狐，Chrome，Opera等浏览器
图片上下居中
|
