css图片垂直居中代码
<!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>
</head>
<style type="text/css">
.box {
width: 220px;
height: 220px;
border: 1px solid #F30;
margin: 100px auto 0;
}
.pic-wrap {
display: table-cell;
vertical-align: middle;
width: 220px;
height: 220px;
text-align: center;
/*ie6、7不支持display:table-cell*/
*display: block;
_font-size: 192px;
+line-height: 220px; /*设置ie7中空文本节点行高为220px*/
_font-family: sans-serif;
}
.pic-wrap img {
border: none;
vertical-align: middle\9;/*由于ie中有默认高度的空文本节点*/
}
</style>
<body>
<div class="content">
<div class="box"> <a class="pic-wrap" href="http://www.35no.cn" target="_blank"> <img src="upload/201305301202338551.png"> </a> </div>
</div>
</div>
</body>
</html>
上一条： input表单checkbox和radio文字对齐的代码
下一条： Jquery-simplemodal的使用,弹出窗口,弹出页面
