008（元素居中）

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

啊啊啊啊ly

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

阅读量152

点赞数

分类专栏：每天一个小知识文章标签： markdown css css3

本文链接：https://blog.csdn.net/m0_46555090/article/details/121609130

版权

每天一个小知识专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Day008（元素居中）

1.让一个元素垂直居中

3）行元素垂直居中

line-height:(容器高度);

2）让一个元素垂直居中的要点：

1.当前元素必须是inline-block

2.给当前元素后添加兄弟元素（兄弟必须是inline-block)

3.给兄弟元素添加height与父元素同高

4.给兄弟元素和当前元素添加vertical-align:middle;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type=text/css>
		*{
			margin:0;
			padding:0;
		}
		div{
			width:500px;
			height:500px;
			background:skyblue;
			margin:50px auto;
		}
		div img{
			vertical-align:middle;
		}
		div span{
			display:inline-block;
			height:500px;
			vertical-align:middle;
		}
	</style>
</head>
<body>
	<div>
		<img src="../images/1.jpg" alt="">
		<span></span>
	</div>
</body>
</html>

在这里插入图片描述

2.让元素垂直水平居中

给上面代码中的div内添加 $\color{red}{text-align：center}$ ；（text-align要添加给父元素，且对块元素无效；块元素应该用margin：0 auto；）即可。

3.垂直水平居中案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type=text/css>
		*{
			padding:0;
			margin:0;
		}
		ul{
			width:800px;
			height:92px;
			margin:50px auto;
			background:skyblue;
			list-style:none;
			/*去掉li前的点 */
		}
		ul li{
			float:left;
			margin:0 10px;
		}
		ul li a{
			display:block;
			width:92px;
			height:92px;
			text-align:center;
		}
		ul li a span{
			display:inline-block;
			height:92px;
			vertical-align:middle;
		}
		ul li a img{
			vertical-align:middle;
		}
		ul li a:hover{
			background:url(../images/bg.png);
		}
	</style>
</head>
<body>
	<ul>
		<li><a href=""><img src="../images/logo1.png" alt=""><span></span></a></li>
		<li><a href=""><img src="../images/logo2.png" alt=""><span></span></a></li>
		<li><a href=""><img src="../images/logo3.png" alt=""><span></span></a></li>
		<li><a href=""><img src="../images/logo4.png" alt=""><span></span></a></li>
		<li><a href=""><img src="../images/logo5.png" alt=""><span></span></a></li>
		<li><a href=""><img src="../images/logo6.png" alt=""><span></span></a></li>
		<li><a href=""><img src="../images/logo7.png" alt=""><span></span></a></li>
	</ul>
</body>
</html>