标签：style blog color 使用 width html
.box{ width: 100px; height: 100px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; } .out, .in{ float: left; margin-right: 15px; } /* out */ .out .t{ box-shadow: 0 -3px 5px -2px #f00; } .out .r{ box-shadow: 3px 0 5px -2px #0f0; } .out .b{ box-shadow: 0 3px 5px -2px #00f; } .out .l{ box-shadow: -3px 0 5px -2px #ff0; } /* in */ .in .t{ box-shadow: inset 0 3px 5px -2px #f00; } .in .r{ box-shadow: inset -3px 0 5px -2px #0f0; } .in .b{ box-shadow: inset 0 -3px 5px -2px #00f; } .in .l{ box-shadow: inset 3px 0 5px -2px #ff0; }
1.使用一个空标签辅助实现图片垂直居中
css代码：
<style type="text/css">
*{ margin:0; padding:0;}
body{padding:10px 0 0 10px;}
.box{
width:200px;
height:200px;
border:1px solid #0CF;
text-align:center;
}
.box span{
height:100%;
vertical-align:middle;
display:inline-block;
}
.box img{
vertical-align:middle;
}
</style>
html代码：
<div class="box">
<span></span>
<img src="1.jpg" />
</div>
2.利用包围图片的盒子及图片的宽度，高度计算实现图片的垂直居中
标签：style blog color 使用 width html
原文地址：http://www.cnblogs.com/wengqi/p/3443265.html
