实现img标签在div中,垂直居中。
实现方式:在和img同级的标签中,添加一个span标签,使span标签的高度和父标签div的高度一样,同时,使用vertical-align:middle;
<html>
<head>
<style>
.img_div{
width: 300px;
height: 400px;
background: blue;
}
img{
width: 200px;
height: 100px;
vertical-align:middle;
border: 0;
margin: 0 auto;
}
.text_center{
display: inline-block;
vertical-align: middle;;
height: 100%;
}
</style>
</head>
<body>
<div>
<div class='img_div'>
<img class='img' src='./T1OU__BgxT1RCvBVdK.jpg'/>
<span class='text_center'></span>
</div>
</div>
</body>
</html>
学习博客: