爱站程序员基地前言
许多小伙伴在写css样式的时候经常会遇到这样的一个需求，让两行长短不一的文本对齐，让其更加美观。部分小伙伴想到的就是
text-align:center;
但是出来的效果却跟理想的有差距。
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>div{width:80px;text-align: center ;}</style></head><body><div>姓名</div><div>个性签名</div><script></script></body></html>
效果图如下：
很明显，这并不是我们想要的效果。
正确演示
1.达到想要的效果需要把text-align:center换成justify两端对齐。text-align-last: justify;最后一行两端对齐。两句缺一不可哦！
text-align-last: justify;text-align: justify;
注意：要设置宽度
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><style>div{width:80px;text-align-last: justify;text-align: justify;}</style></head><body><div>姓名</div><div>个性签名</div><script></script></body></html>
效果展示：
