当给父元素设置text-align:center时，它只会对行内元素和行内块元素进行水平居中。在示例中，当p标签的宽度被设定为20%后，尽管其内容文本仍居中，但p标签本身并未相对于父元素居中。这表明text-align属性不会影响块级元素的位置，除非将其转换为行内或行内块元素。
平时在用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这个属性对其文本起作用。
3480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
