对于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可作用于容器本身，但不能作用于容器里面的内容，也不能传递
text-align的center以及float的补充
时间： 2024-11-03 01:22:36