聊聊CSS属性之 text-align

大家都知道text-align属性时定元素中的文本/行内块元素的水平对齐方式的。
常见的四个属性如下：
left: 把文本排列到左边
right: 把文本排列到右边
center: 把文本排列到中间
justify: 实现两端对齐文本效果

# left

通常是浏览器的默认的对齐方式（具体的由浏览器决定），举个例子：

<p > 我是测试内容 </p>
<p style="text-align: left;"> 我是测试内容 </p>

image.png
如上图可以看出，浏览器默认是左对齐，加上属性 text-align: left; 没有不同

# right

把文本排列到所在元素的右边，举个栗子:

<p> 我是测试内容 </p>
<p style="text-align: right;"> 我是测试内容 </p>

image.png
如上图，文字排列到了内容右侧

# center

把文本排列到所在元素的中间，举个栗子:

<p> 我是测试内容 </p>
<p style="text-align: center;"> 我是测试内容 </p>

image.png
如上图，文字排列到了内容中间

# justify

实现所在元素内两端对齐文本，举个栗子:

<p> 我是测试内容 </p>
<p> 
    <span style="text-align: justify;"> 我是测试内容 </span>
</p>

image.png
如上图，什么鬼？？？竟然没有效果。。。
原来是 text-align 不会处理被打断的行和最后一行！！！
如果你的文字只占了一行，同时它也是最后一行了，所以 text-align 设置为 justify 不会产生任何效果。
如何解决呢？很简单，给所在元素增加一个 ::after 伪类，上代码

span::after{
  display:inline-block;
  content:'';
  width:100%;
}

再看效果

image.png

哇哦，已经实现两端对齐了

# text-align-last

基于 "text-align: justify 的弊端，text-align-last 可以很轻松实现两端对齐，举个栗子：

<p> 我是测试内容 </p>
<p style="text-align-last: center;"> 我是测试内容 </p>

image.png

是不是很简单，已经实现了

注意：text-align-last 属性不是所有浏览器都支持！！！