首页 > 代码库 > text-align的center以及float的补充

text-align的center以及float的补充

2024-07-11 20:30:10   216人阅读

对于text-align的center属性有如下特点：

1、将text-align的center应用在一个容器上，它只是针对容器里面的文字以及容器里面的display为inline或者inline-block的容器，如果里面的容器display为block，则里面的容器不会居中


2、text-align具有向下传递性，会不断向子元素传递

如图

<style>
.div1{
	text-align:center;
	width:100%;
	height:200px;
	background:#9F0;
	
}


.div2{
	display:block;
	width:200px;
	height:50px;
	background:#00F;
}
span{
	display:inline-block;
	height:100px;
	background:#0F0;	
}

h1{
	display:inline;
	background:#F00;
}
</style>


<body>
<div class="div1">
<h1>我是中心</h1>
<div><div class="div2">第三个中心</div></div>
<span>这是中心</span>
</div>
</body>

蓝色和红色对比说明center可作用于display为inline的元素，但不能作用于display为block的元素

蓝色与绿色对比说明center可作用于display为inline-block的元素，但不能作用于display为block的元素

蓝色与蓝色里面的文字对比说明center可作用于文字，并且具有向子容器传递的特点


2、float只作用于容器本身，不作用于里面的元素，不具有传递性

<style>
.div1{
	width:100%;
	height:200px;
	background:#CF0;
	float:right;
}

.div2{
	width:100px;
	height:100px;
	float:right;
	background:#0F0;
}

.div3{
	width:100px;
	height:100px;
	background:#F00;
}

</style>


<body>
<div class="div1">
我要float
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>

文字和红色与绿色对比说明float可作用于容器本身，但不能作用于容器里面的内容，也不能传递


联系
我们