【CSS】如何将图片放值在容器中间，垂直居中

最新推荐文章于 2022-09-18 15:25:15 发布

朱砂绛

最新推荐文章于 2022-09-18 15:25:15 发布

阅读量3.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42376054/article/details/98505670

版权

前端专栏收录该内容

18 篇文章 2 订阅

订阅专栏

方法一：

给容器（父元素）加上text-align:center；
给当前元素转成行内块元素（display:inline-block；）再给当前元素加上vertical-align:middle；
在当前元素的后面（没有回车）加上同级元素span；
并对span进行 vertical-align:middle；width：0；height：100%；display:inline-block等设置；
垂直对齐方式（vertical-align:top/bottom/middle}

<style>
	*{margin:0;padding:0;}
	div{
		width:300px; 
		height:300px; 
		border:1px solid red; 
		margin:50px auto; 
		text-align:center;
	}
	div img{
		vertical-align:middle; 
	}
	div span {
		width:0;
		height:100%; 
		vertical-align:middle; 
		display:inline-block;
	}
</style>
<body>
	<div>
		<img src="pic.png" /><span></span>
	</div>
</bosy>

方法二（利用定位）：

将容器设置为相对定位，position: relative
将图片设置为绝对定位，position: absolute
为图片添加，left:0;right:0;top:0;bottom:0;margin:auto

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

朱砂绛

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【CSS】如何将图片放值在容器中间，垂直居中

必须给容器（父元素）加上text-align:center；必须给当前元素转成行内块元素（display:inline-block；）再给当前元素加上vertical-align:middle；在当前元素的后面（没有回车）加上同级元素span；并对span进行 vertical-align:middle；width：0；height：100%；display:inline-block等设置...
复制链接

扫一扫