<!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</title>
<style>
body{ margin:0 auto;text-align:center;}
div{display:table-cell; width:550px; height:200px; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}
span{display:inline-block; font-size:0.1em; vertical-align:middle;}
.zxx_align_box_3 li{width:1em; height:1em; padding:0.1em; margin:0 0.1em 0 0; font-size:128px; float:left; border:1px solid #beceeb;}
.zxx_align_box_3 li img{width:100%; height:100%; background-repeat:no-repeat; background-position:center;background-image:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg);}
.zxx_align_box_4 li{float:left; margin-right:13px;}
.zxx_align_box_4 li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;}
.zxx_align_box_4 li div img{vertical-align:middle;}
.zxx_align_box_5 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;}
.zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}
</style>
</head>
<body>
<div>
<span>这些是用来作为测试效果的，这些是用来作为测试效果的，呵呵</span>
</div>
<ul class="zxx_align_box_3 fix">
<li>
<img src="1.jpg" style="" />
</li>
</ul>
<ul class="zxx_align_box_4 fix">
<li>
<div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></div>
</li>
</ul>
<div class="zxx_align_box_5 fix">
<a href="#zhangxinxu">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
</a>
<a href="#zhangxinxu">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
</a>
</div>
</body>
</html>
