html div textalign,聊聊CSS属性之 text-align

大家都知道text-align属性时定元素中的文本/行内块元素的水平对齐方式的。

常见的四个属性如下：

left: 把文本排列到左边

right: 把文本排列到右边

center: 把文本排列到中间

justify: 实现两端对齐文本效果

# left

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

我是测试内容

我是测试内容

image.png

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

# right

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

我是测试内容

我是测试内容

image.png

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

# center

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

我是测试内容

我是测试内容

image.png

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

# justify

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

我是测试内容

我是测试内容

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 可以很轻松实现两端对齐，举个栗子：

我是测试内容

我是测试内容

image.png

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

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