CSS实现文本两端对齐
# 使用text-align实现文本两端对齐
大多数情况下我们使用text-align属性时，使用的是left、right、center这几种常见的左、右、居中对齐。但往往在实际项目中会有文本两端对齐的需求，比如说在表单label两端对齐保证美观。
这里提供两种方式实现文本两端对齐。
先看效果图：
# 方案一：text-align:justify
justify属性会使文本两端对齐，但它对最后一行无效，往往我们想实现的就是一行文本的对齐，那怎么实现呢？这里我们借助伪元素after添加额外的一行，使我们的文字不是最后一行，详见文档，代码如下：
<div class="text">
<p>text-align:justify 居中对齐文案</p>
</div>
1
2
3
2
3
.text {
width: 500px;
text-align: justify;
outline: 1px solid grey;
}
.text p {
display: inline-block;
margin: 0;
width: 100%;
}
.text p::after {
content: '';
display: inline-block;
width: 100%;
height: 0;
line-height: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
这个方案有个缺陷就是会有一行空白占位，即使我们设置高度和行高为0也无法解决，还好css3提供了一个新属性：text-align-last
# 方案二：text-align-last：justify 文档
<div class="text2">
<p>text-align-last:justify 居中对齐文案</p>
</div>
1
2
3
2
3
.text2 {
margin-top: 10px;
width: 500px;
text-align-last: justify;
outline: 1px solid grey;
}
.text2 p {
display: inline-block;
margin: 0;
width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 其它
justify-all: text-align提供了该可选值，但各大浏览器都没有实现该功能，不能使用
text-justify: text-align配置了justify值时，可以通过该属性配置对齐规则，详见文档
上次更新: 2025/09/05, 8:09:00