<!--media=print 这个属性只在打印时有效-->
<stylemedia=print>
.Noprint{display:none;} //不打印
.PageNext{page-break-after: always;}//换页打印
</style>
<script type="text/javascript">
function doPrintSetup(){
//打印设置
document.all.WebBrowser.ExecWB(8,1)
}
function doPrintPreview(){
//打印预览
document.all.WebBrowser.ExecWB(7,1)
}
function doPrint() {
window.print();
}
</script>
<input type="button" value="直接打印" onclick="return doPrint();" id="Button1" />
<div class="Noprint">这里面的内容可以在网页上显示，在打印时不会显示</div>
<div class="PageNext"></div>//加上此空div，下面的内容就会换一页打印，需要注意整体布局
div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法:
在曾经的 淘宝UED 招聘 中有这样一道题目：
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。
题目的难点在于两点：
至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
<div class="box">
<img src=/blog_article/"http_/pics_taobao_com/bao/album/promotion/taoscars_180x95_071112_sr.jpg />
</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
* {margin:0; padding:0; font-size:12; list-style-type:none; }
#mini_nav {width:390px; height:38px; overflow:hidden; margin:50px auto; background:url(/blog_article/nav.png) no-repeat 0 0;}
#mini_nav li {width:65px; height:38px; float:left;}
#mini_nav li a {display:block; width:65px; height:38px; padding-top:40px; overflow:hidden;}
#mini_nav li a:hover {background:url(/blog_article/nav.png) no-repeat;}
#mini_nav li.nav1 a:hover {background-position:0 -38px;}
#mini_nav li.nav2 a:hover {background-position:-65px -38px;}
#mini_nav li.nav3 a:hover {background-position:-130px -38px;}
#mini_nav li.nav4 a:hover {background-position:-195px -38px;}
#mini_nav li.nav5 a:hover {background-position:-260px -38px;}
#mini_nav li.nav6 a:hover {background-position:-325px -38px;}
</style>
</head>
<body>
<ul id="mini_nav">
<li ><a href="#" title="财经">财经</a></li>
<li ><a href="#" title="商业">商业</a></li>
<li ><a href="#" title="管理">管理</a></li>
<li ><a href="#" title="领袖">领袖</a></li>
<li ><a href="#" title="协会">协会</a></li>
<li ><a href="#" title="博客">博客</a></li>
</ul>
</body>
</html>
请获取下面图片 并命名为：nav.png
本文链接