<!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>利用定位来显示垂直局中的图片</title>
<style type="text/css">
div{width:400px;overflow:hidden;border:solid 1px black;position:relative;}
ul{height:110px;width:20000px;}
.miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;*position:relative;*overflow:hidden;float:left;}
.miao a{display:table-cell;vertical-align:middle;border:solid 1px blue;*position:absolute;*left:50%;*top:50%;}
.miao a img{border:dashed 1px green;*position:relative;*left:-50%;*top:-50%;}
</style>
</head>
<body>
<h1>固定高宽的容器中，图片垂直局中。</h1>
<div>
<ul>
<li class="miao">
<a><img src="http://bbs.blueidea.com/images/defalit/logo.gif" alt="Logo" /></a>
</li>
<hr />
<li class="miao" style="width:300px;height:80px;">
<a><img src="ttp://bbs.blueidea.com/images/defalit/logo.gif" alt="Logo" /></a>
</li>
<hr />
<li class="miao" style="width:500px;height:220px;">
<a><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></a>
</li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用定位来显示垂直局中的图片</title>
<style type="text/css">
div{width:400px;overflow:hidden;border:solid 1px black;position:relative;}
ul{height:110px;width:20000px;}
.miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;*position:relative;*overflow:hidden;float:left;}
.miao a{display:table-cell;vertical-align:middle;border:solid 1px blue;*position:absolute;*left:50%;*top:50%;}
.miao a img{border:dashed 1px green;*position:relative;*left:-50%;*top:-50%;}
</style>
</head>
<body>
<h1>固定高宽的容器中，图片垂直局中。</h1>
<div>
<ul>
<li class="miao">
<a><img src="http://bbs.blueidea.com/images/defalit/logo.gif" alt="Logo" /></a>
</li>
<hr />
<li class="miao" style="width:300px;height:80px;">
<a><img src="ttp://bbs.blueidea.com/images/defalit/logo.gif" alt="Logo" /></a>
</li>
<hr />
<li class="miao" style="width:500px;height:220px;">
<a><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></a>
</li>
</ul>
</div>
</body>
</html>
扫一扫
2669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
