如何让一个元素在父级元素中上下左右都居中

最新推荐文章于 2023-04-03 16:21:54 发布

makelucky

最新推荐文章于 2023-04-03 16:21:54 发布

阅读量1.2k

点赞数 2

分类专栏： H5

本文链接：https://blog.csdn.net/makelucky/article/details/90415198

版权

H5 专栏收录该内容

28 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片居中问题</title>
		<style>
		    *{
				margin:0;
				padding:0;
			}
			a{
				display:inline-block;
				width:250px;
				height:250px;
				background:blue;
				text-align:center;
		    }
			img{
				vertical-align:middle;
			}
			span{
				display:inline-block;
				width:0;
				height:100%;
				vertical-align:middle;
			}
			a:hover{
				background:red;
			}
		</style>
	</head>
	<body>
		<a href="#">
			<img src="haha.png"/><span></span>
		</a>
		<a href="#">
			<img src="haha.png"/><span></span>
		</a>
		<a href="#">
			<img src="haha.png"/><span></span>
		</a>
		<a href="#">
			<img src="haha.png"/><span></span>
		</a>
		<a href="#">
			<img src="haha.png"/><span></span>
		</a>
	</body>
</html>

（1）要居中元素必须是inline-block元素

（2）给要居中元素的父元素加上text-align：center（左右居中）

（3）给当前元素加上同级元素span，注意不能加回车和换行（因为行内块元素受空格影响）

（4）给当前元素加上vertical-align：middle

（5）span{

display:inline-block;

width:0;

height:100%;

vertical-align:middle;

}