初学者：关于html中的text-align文本居中属性详解


1
    text-align属性：文本对齐方式，设给**块级元素**。因为行级元素有个特点，内容有多宽，它就有多宽。也就是内容自适应。比如说坐在椅子上把椅子撑满了，就无法再说它居中居左居右了。

解释代码如下：

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .txt1{
                font-size: 30px;
                text-align: center;
            }
            span{
                text-align: center;
            }
        .txt2{
            text-align: right;
        }
        </style>
    </head>
    <body>
        <p class="txt1">这是内容1</p>
        <p class="txt2"><span>这是内容2</span></p>
        <p class="txt3"><span>这是内容3</span></p>
<!--上面用span居中时，无法居中，因此span是行级元素，
行级元素无法设置text-align,若把text-align设置给外面的p即可，
所以自己理解的，若想把行级元素居中，在外面给它套个块级元素。
-->
    </body>
</html>

运行图解如下：
在这里插入图片描述

由上图可以看出：
给p这个块级标签设置text-align生效了，给span这个行级标签设置text-align无效。
若想让span设置text-align生效，需要再其外面加一个块级标签。
下面扩充行级标签和块级标签有哪些
行内元素：
最常用的是span，其他还有img、a abbr b big br em i input label

块级元素
比较有代表性的是div 其余有p h1 h2 h3 h4 h5 h6 table ul li ol header section aside footer dl dd dt form hr pre tbody td tfoot th thead tr

下面再进行一些扩充：

text-decoration:none 去掉文本装饰线
text-decoration:underline 下划线
text-decoration:overline 上划线
text-decoration:line-through 删除线
text-indent属性 文本块首行缩进 单位px、em（字符宽度的倍数）、百分比（相对于父元素宽度的百分之多少）

CSS长度单位
px 相对于显示器分辨率
em 相对长度单位 相对于父级的font-size而言，父级就是父元素以上的。
若父级的父级设置font-size值为30px，父级设置为50px，则em的值和直接的父级50px有关。若父级没有设置，则和父级的父级有关。
%
rem 相对于根元素的字体大小的单位，即为html的字号大小

浏览器的默认大小是16px，未经调整的浏览器都符合1em=16px

有其他不会的可以私信噢，
感觉文章对您有帮助的，动动您的发财小手指点个赞哦，谢谢！