实现img垂直居中

最新推荐文章于 2024-07-09 10:20:31 发布

ioszhanghui

最新推荐文章于 2024-07-09 10:20:31 发布

阅读量437

点赞数 1

分类专栏： Vue 文章标签： img vue 垂直居中

本文链接：https://blog.csdn.net/ioszhanghui/article/details/98485430

版权

Vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

实现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>