平时在用text-align:center实现父元素文本居中比较频繁,但偶然间发现有些时候text-align:center并不能达到自己想要的效果,请看下面的例子:
html部分
<body>
<div class="container">
<span class="s1">你好呀</span>
<p class="p1">我是某某</p>
</div>
</body>
css部分
.container{
background-color: rgba(145, 145, 145, 0.562);
height: 100px;
text-align: center;
}
.s1{
background-color: aqua;
}
.p1{
background-color: black;
color: #fff;
}
此时得出的效果是
这个时候我们乍一看,好像和预想的一样,p标签和span标签都是居中的,OK,那我们现在来修改一下p标签的宽度
.p1{
background-color: black;
color: #fff;
width: 20%;
}
我们将p的宽度设为20%,再看下现在是什么效果
现在p标签是不是并没有水平居中,由此可以得出一个结论给父级设置text-align这个属性,只会对其子元素是行级以及行级块元素起作用
再仔细看,span和p里的文本都是水平居中的,那么还能得出结论子元素会继承text-align这个属性对其文本起作用。