實作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>
學習部落格:
https://blog.csdn.net/a1044187112/article/details/82254434