text-align的用法

text-align的用法
text-align运用在块级元素中，使其中的文本对齐。事实上这句话的意思是运用在块级元素中text-align会使其包含行内元素对齐。

<div class="test">
    <p>hhh</p>
    <h1>nihaohaohhh</h1>
    <img src="./1.jpg" alt="">
</div>

1
2
3
4
5
会发现p和h1以及img都居中了？

结果是所有的元素都居中了，可是

和

不是块级元素吗？
原因是这些块级元素继承了

中的text-align属性，然后对包含在其中的文本进行居中对齐。
使用

的好处是，假如要对某些元素进行居中，不用对每一个块级元素进行居中处理，只要对

应用样式就可以了。
1
2
3
以上说法是我从未网上查找总结的，自己觉得使用另一种方式解释会更合适

css的样式
.test{
width: 300px;
height: 300px;
text-align: center;
background-color: pink;
}
img{
width: 50px;
height: 50px;

    }
    .test div{
        /* width: 50px;
        height: 50px; */
        border: 1px solid black;
    }
    .test p{
        /* display: inline-block; */
        width: 150px;
        height: 50px;
        background-color: red;
    }
    span{
        border: 1px solid black;
    }
    h1{
        border: 1px solid black;
    }

结构

我是div

我是块级元素p

我是行级元素span

我是h2，块级

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
最终样式

如上图所示：

我们发现对父级使用text-align:center; 会对行级块以及行级元素span有居中的效果。

而对块级元素div以及h2看似也有居中效果？这是为什么呢？

观察可以发现我们并没有给div和h2设置宽高，当没有设置宽高的时候，其宽度继承了父级的，高度是由文本撑开，当然也继承了父级的text-align:center;

但是我们观察块级元素p标签，p元素我们给你设置了宽高，此时它本身不是水平居中，而其文本是居中的，也就是说，给父级设置text-align这个属性，只会对其子元素是行级以及行级块元素起作用，且子元素会继承text-align这个属性对其文本起作用。

当我们把p元素转换为行级块元素的时候，你会发现，不仅p元素中的文本居中了，其自身也居中了。
————————————————
版权声明：本文为CSDN博主「阳光下的女汉子」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44307807/article/details/85872703