前言
许多小伙伴在写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>
效果展示：