css 搞懂 justify 对齐方式

2025-06-12

text-align 设置文本对齐方式,属性值有 left, right, center, justify。

关于 justify 属性值,我之前一直不理解具体是什么意思。今天终于明白了,记录一下。


justify 表示两端对齐,如下示例。

床前明月光,疑是地上霜。举头望明月,低头思故乡。
text-align: left; (默认值)
床前明月光,疑是地上霜。举头望明月,低头思故乡。
text-align: justify;

上面👆🏻左边第一行最后一个字 “明” 后面还有一点空白,这点空白不足以放一个完整的汉字,导致左右两边留白不一致。

上面👆🏻右边设置了 justify 对齐方式,可以看到第一行最后一个字 “明” 后面没有空白,左右两边留白一致。

justify 对齐方式对最后一行是不生效的。

如果只有一行,那么第一行也是最后一行,此时设置 justify 是不生效的。

床前明月光,疑是地上霜
text-align: left; (默认值)
床前明月光,疑是地上霜
text-align: justify;

前面提到 justify 对最后一行不生效,如果有需求需要设置最后一行也要两端对齐,怎么办?

可以使用 text-align-last 属性,只设置最后一行的对齐方式。

床前明月光,疑是地上霜。举头望明月,低头思故乡。
text-align: left; (默认值)
床前明月光,疑是地上霜。举头望明月,低头思故乡。
text-align: justify; text-align-last: justify;

返回首页

本文总阅读量  次
皖ICP备17026209号-3
总访问量: 
总访客量: