text-align的用法

　

text-align

text-align的用法

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

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

会发现p和h1以及img都居中了？

结果是所有的元素都居中了，可是<h1>和<p>不是块级元素吗？
原因是这些块级元素继承了<p>中的text-align属性，然后对包含在其中的文本进行居中对齐。
使用<p>的好处是，假如要对某些元素进行居中，不用对每一个块级元素进行居中处理，只要对<p>应用样式就可以了。

以上说法是我从未网上查找总结的，自己觉得使用另一种方式解释会更合适

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

        }
        .test p{
            /* 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;
        }

结构
    <p class="test">
        <p>我是p</p>
        <p>我是块级元素p</p>
        <span>我是行级元素span</span>
        <h1>我是h2，块级</h1>
        <img src="./1.jpg" alt="">
    </p>

最终样式

如上图所示：

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

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

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

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

• 当我们把p元素转换为行级块元素的时候，你会发现，不仅p元素中的文本居中了，其自身也居中了。

相关阅读