text-align: center 和 margin: 0 auto 的区别

发表于 | 更新于: | 分类于 | | 阅读次数:
字数统计: 235 | 阅读时长 ≈ 1

1. text-align: center;

作用就是让盒子里的文字或者图片水平居中 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.world_box{
			width: 400px;
			height: 400px;
			background-color: skyblue;
			text-align: center;
		}
		.image_box{
			width: 400px;
			height: 400px;
			background-color: pink;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="world_box">
		我是文字
	</div>
	<div class="image_box">
		<img src="https://www.qcmoke.site/images/logo.jpg" style="width: 200px;height: 200px;" />
	</div>
</body>
</html>

2. margin: 0 auto;

作用是让盒子相对父盒子水平居中，而不能让盒子中的文字居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.div1{
			width: 400px;
			height: 400px;
			background-color: skyblue;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class="div1">
		我是文字
	</div>
</body>
</html>


----------- 本文结束 -----------




如果你觉得我的文章对你有帮助，你可以打赏我哦~
0%