<!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>CSS实现图片水平垂直、居中于DIV</title>
<style>
h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}
img{border:none;}
u{text-decoration:none;}
em{font-style:normal;}
a{color:#0064B1;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{color:#ff6700;text-decoration:underline;}
body{font-size:12px;color:#444;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;}
.clear{height:0;overflow:hidden;clear:both;}
h1{font:bold 18px microsoft yahei; color:#ff6700;margin-bottom:20px;}
h2{ position:absolute;top:12px;right:20px;}
h2 a{ text-indent:-9999px; background:url(/images/logo.gif) no-repeat; height:55px;width:130px; display:block;}
</style>
<style type="text/css">
/*For Firefox Chrome*/
.demo{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}
.demo a{display:table-cell;vertical-align:middle;width:200px;height:140px;}
.demo a img{border:1px #ddd solid;margin:0 auto;max-width:200px;max-height:140px;}
*+html .demo a{position:absolute;top:50%;width:100%;text-align:center;height:auto;}
*+html .demo a img{position:relative;top:-50%;left:-50%;}
*html .demo a{position:absolute;top:51%;width:100%;text-align:center;height:auto;display:block;}
*html .demo a img{position:relative;top:-50%;left:-50%;width:expression(this.width>200?"200px":"atuo");height:expression(this.height>140?"140px":"atuo");}
</style>
</head>
<body>
<h1>图片水平垂直居中</h1>
<div class="demo"><a href="#"><img src="/jscss/demoimg/demoimgsmall.jpg" /></a></div>
</body>
</html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS实现图片水平垂直、居中于DIV</title>
<style>
h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}
img{border:none;}
u{text-decoration:none;}
em{font-style:normal;}
a{color:#0064B1;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{color:#ff6700;text-decoration:underline;}
body{font-size:12px;color:#444;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;}
.clear{height:0;overflow:hidden;clear:both;}
h1{font:bold 18px microsoft yahei; color:#ff6700;margin-bottom:20px;}
h2{ position:absolute;top:12px;right:20px;}
h2 a{ text-indent:-9999px; background:url(/images/logo.gif) no-repeat; height:55px;width:130px; display:block;}
</style>
<style type="text/css">
/*For Firefox Chrome*/
.demo{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}
.demo a{display:table-cell;vertical-align:middle;width:200px;height:140px;}
.demo a img{border:1px #ddd solid;margin:0 auto;max-width:200px;max-height:140px;}
*+html .demo a{position:absolute;top:50%;width:100%;text-align:center;height:auto;}
*+html .demo a img{position:relative;top:-50%;left:-50%;}
*html .demo a{position:absolute;top:51%;width:100%;text-align:center;height:auto;display:block;}
*html .demo a img{position:relative;top:-50%;left:-50%;width:expression(this.width>200?"200px":"atuo");height:expression(this.height>140?"140px":"atuo");}
</style>
</head>
<body>
<h1>图片水平垂直居中</h1>
<div class="demo"><a href="#"><img src="/jscss/demoimg/demoimgsmall.jpg" /></a></div>
</body>
</html>
721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
