CSS实现两端对齐的几种方法

2019独角兽企业重金招聘Python工程师标准>>>

方法一：

比较拙劣但省事的做法是手动计算宽度，加一堆“&nbsp”模拟两端对齐的效果。这种方法我们就不过多讨论了。

方法二：

    text-align: justify;
    text-align-last: justify;

这种方法适用于多行文本两端对齐，text-align控制除最后一行以外的文本两端对齐，text-align-last控制最后一行文本两端对齐。

方法三(兼容)：

旧版本的某些浏览器，不支持text-align-last属性，所以解决方案是在文本后面加一个inline-block的伪对象，模拟它为最后一行，或者在html代码中，文本最后加一个空的inline-block span。原理相同。

代码如下：

:after{
display:inline-block;
content:'';
overflow:hidden;
width:100%;
height:0;
}

这样伪对象就可以模拟出最后一行的效果了，浏览器会把全部文本做两端对齐处理

 

所以终极方案就是方法二加方法三啦~~亲测可用

转载于:https://my.oschina.net/HeYuhui/blog/727065