对于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可作用于容器本身，但不能作用于容器里面的内容，也不能传递


float

float元素不能撑大父容器以及父容器之上的各层容器的高度，但是float元素里面有高度的元素可以撑大float元素的高度，而且float元素中有高度的相邻元素也可以撑大float元素父容器的高度


即使float元素里面的元素有高度，float元素后面的元素仍然会忽略float元素以及里面元素的位置而决定自己的位置，但是如果float元素后面的元素position为static则float元素的后面元素会处于float以及里面元素之下，否则反之


如果float元素前面有相邻元素，float元素会忽略display为inline和inline-block的元素而位于他们之前且同行，但是不能位于display为block的元素之前且不同行



第一部分代码：

<style>
.div1{
	background:#000;
	width:200px;	
}


.div2{
	width:100px;
	background-color:#0F0;
	float:left;
}

.div3{
	width:200px;
	height:100px;
	background-color:#009;
}

p{
        background-color:#F00;
}

</style>


<body>
<div class="div1">
<div class="div2">
<p>我在div1里面</p>
</div>
</div>
<div class="div3"></div>
</body>


将div3的postion设置为relative或者absolute后为


简单说明：未显示出来的黑色为div1，绿色为div2，红色为p，蓝色为div3

未显示的黑色和绿色对比说明float元素不能撑大父容器的高度

绿色与红色对比说明float元素可以被float元素里面的元素撑大高度

蓝色和绿色对比说明float元素后面的元素会忽略float元素以及里面元素的位置而决定自己的位置，但是float元素后面的position为static的元素会处于float元素以及里面元素之下



第二部分代码：

<style>
.div1{
	width:200px;
	background:#F00;
}


.div2{
	width:150px;
	height:50px;
	display:inline-block;
	background:#000;
}

.div3{
	width:100px;
	background-color:#0F0;
	float:left;

}
</style>


<body>
<div class="div1">
<div class="div2"></div>
<div class="div3">
<p>我在float里面</p>
</div>
</div>

</body>

简单说明：红色为div1，黑色为div2，绿色为div3

绿色与黑色对比说明float元素不能撑大父容器高度，但是float元素中有高度的兄弟元素可以撑大父容器高度


第三部分代码：

<style>
.div1{
	width:100px;
	height:100px;
	background-color:#000;
	display:inline-block;
}

.div2{
	width:100px;
	height:100px;
	background-color:#F00;
	float:left;
}
</style>

<body>
<div class="div1"></div>
<div class="div2"></div>
</body>


简单说明：红色为div2，黑色为div1


将div1的display改为block为：





Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生