未知宽高图片在元素中垂直水平居中代码实例
分类:实例代码
分享一段代码实例,它实现了未知宽高的图片在指定元素中垂直水平居中效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { padding: 0; margin: 0; } #antzone{ display:table-cell; *display:block; *position:relative; width:200px; height:200px; text-align:center; vertical-align:middle; background:blue; } #antzone p{ *position:absolute; *top:50%; *left:50%; margin:0; } #antzone p img{ *position:relative; *top:-50%; *left:-50%; vertical-align:middle; } </style> </head> <body> <div id="antzone"> <p><img src="demo/CSS/img/100x100.png"></p> </div> </body> </html>