图片水平垂直居中方案
网站建设中经常有的时候会遇到客户给的图片大小尺寸不统一,造成了在后台上传了之后,前台显示错位的现象。
不同尺寸的图片水平垂直居中
解决的方案如下:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
.text{ width:200px; height:200px; border:1px solid #eee;display:table-cell;text-align:center;vertical-align:middle;}
.text img{ max-width:200px; max-height:200px;}
-->
</style>
</head>
<body>
<div><img src="58be4e56188e9.jpg" alt="" /></div>
<div><img src="top2.jpg" alt="" /></div>
</body>
</html>