图片的垂直水平居中
vertical-align的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>docment</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 500px;
height: 500px;
margin: 50px auto;
border: 1px solid black;
text-align: center;
}
.wrap:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.wrap .img {
display: inline-block;
width: 150px;
height: 150px;
background: #bfa;
vertical-align: middle;
}
</style>
<body>
<div class="wrap">
<div class="img"></div>
</div>
</body>
</html>
查看效果>>传送门
如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/CSS2.1/08.html