css怎么让图片垂直左右居中?(外层div是浮动且按照百分比排列)
一、原始的居中方法是把div换成table
<div style="width: 500px; height: 200px; border: solid 1px red; text-align: center">
<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" /></div> <div style="width: 500px; height: 200px; border: solid 1px red;"> <center> <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" /> </center></div><table style="width: 500px; height: 200px; border: solid 1px red; text-align:center"> <tr> <td> <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" /> </td> </tr></table>二、但是如果外层div是浮动且按照百分比排列的话，你要怎么做？
此时，请看图下的关键代码，可实现不同分辨率下的图片垂直左右居中。
<!doctype html>
<html><head><meta charset="utf-8"><title>图片垂直水平居中</title><style>div{height:500px;width:400px;text-align:center;border:1px solid #000;margin:20px auto;}img{vertical-align:middle;} /* 关键代码 */span{height:100%;display:inline-block;vertical-align:middle;} /* 关键代码 */</style></head><body> <div> <img src="http://img.o571.com/fc/ad/20130827161606949.jpg" width="323" height="215" /> <span></span> </div></body></html>
