天天看點

實作img垂直居中

實作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>
           
實作img垂直居中

學習部落格:

https://blog.csdn.net/a1044187112/article/details/82254434