css底部居中对齐

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div内的img 底部对齐/水平居中的问题.</title>
<style type="text/css" >
.pic{height:160px;margin:20px auto;160px;position:relative;border:1px #ccc solid;}
.pic a{position:absolute;left:50%;bottom:0;}
.pic img{position:relative;left:-50%;bottom:0;border:0 none;}
</style>
</head>
<body>
<div class="pic">
<a href="#" >
<img alt="" src="http://bbs.blueidea.com/static/link/7drc.gif" />
</a>
</div>
</body>
</html>

  

原文地址:https://www.cnblogs.com/wangzong/p/3226961.html