9.盒子居中对齐

最新推荐文章于 2023-03-10 22:49:54 发布

P_ning

最新推荐文章于 2023-03-10 22:49:54 发布

阅读量154

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/P_ning/article/details/90733115

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">

	.c1{
		width:500px;
		height:500px;
		border:5px #F66 solid;
		text-align:center;
	}
	.c2{
		width:500px;
		height:500px;
		border:5px #FF6 solid;
		margin:0 auto;
	}
	.c3{
		width:500px;
		height:500px;
		border:5px #FF6 solid;
		margin-left:auto;
		margin-right:auto;
	}
	.c4{
		width:500px;
		height:500px;
		border:5px #FF6 solid;
		margin:0 auto 0;
	}
</style>
</head>

<body>

<div class="c1">让盒子里面的文本,行内元素或行内块元素居中对齐</div>
<div class="c2">让整个盒子水平居中对齐,左右外边距magin为auto即可</div>
<div class="c3">上下外边距并没有要求,但左右必须为auto才能令盒子居中对齐</div><div class="c4">必须是又宽度的块级元素,不然宽度为整个显示器,也就没有所谓让盒子居中对齐这种说法了</div>


</body>
</html>