重学CSS----文本属性开发过程中，经常用到css文本属性，比如首行缩进、水平居中、垂直居中等，奇怪的是有时候这些属性

开发过程中，经常用到css文本属性，比如首行缩进、水平居中、垂直居中等，奇怪的是有时候这些属性好用，有时候就达不到预期效果，每次调整样式时，都是试探性的一个个属性的试错。这说明我并没用深刻掌握各个属性使用的场景，因此梳理一下这些文本属性的使用场景，希望本文能对你有帮助。

缩进

缩进属性

text-indent

值：<length>|<percentage>

应用于：块级元素

初始值: 0

继承性：有

功能：将块元素的第一行缩进指定长度。

缩进示例

div{
  width: 250px;
  text-indent: 20px;
  border: 1px solid #ccc;
}
.p1{
  text-indent: 50%
}
.p2{
  text-indent: 2em
}
<div>
   <p>这是一个段落，他继承了父元素的缩进值是20px。</p>
   <p class="p1">这是一个段落，首行缩进值是50%，缩进值占块元素宽度的50%。</p>
   <p class="p2">这是一个段落，首行缩进值是两个字体大小，也就是首行缩进两个字。</p>
   <span>这是一个行内元素，首行缩进只对块级元素起作用，对行内元素不起作用。</span>
</div>

水平对齐

水平对齐属性

text-align

值：left|center|right|justify

初始值：用户代理特定值；取决于书写方向

应用于：块级元素

继承性：有

功能：设置一个元素中的文本行相互之间的对齐方式。

水平对齐示例

div{
  width: 250px;
  text-align: right;
  border: 1px solid #ccc;
}
.p1{
  text-align: center;
}
.p2{
  text-align: left;
}
.p3{
  text-align: justify;
}
span{
   text-align: left;
}
<div>
   <p>这是一个段落，他继承了父元素text-align: right;，文本行按照右侧对齐的方式对齐。</p>
   <p class="p1">这是一个段落，text-align: center; 文本行之间是按照中间对齐的方式对齐。</p>
   <p class="p2">这是一个段落，text-align: left;，文本行之间是按照左侧对齐的方式对齐。</p>
   <p class="p3">这是一个段落，text-align: justify，文本行是按照两端对齐的方式对齐。</p>
   <span>这是一个行内元素，由于text-align只对块级元素起作用，因此设置了 text-align: left;是无效的。该行内元素是按照父元素text-align: right;对齐。</span>
</div>

垂直对齐

属性名：vertical-align

值：baseline|sub|super|top|text-top|middle|bottom|text-bottom

初始值：baseline

应用于：行内元素和表单元格

继承性：无

功能：将行内元素盒模型与其行内元素容器垂直对齐；垂直对齐表格单元内容